balm-ui/components/pagination/index.js

A modular and customizable UI library based on Material Design and Vue 3

!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("UiPagination",["vue"],t):"object"===typeof exports?exports.UiPagination=t(require("vue")):e.UiPagination=t(e.Vue)}("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={744:function(e){var t=function(e){return function(e){return!!e&&"object"===typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===a}(e)}(e)};var a="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function n(e,t){return!1!==t.clone&&t.isMergeableObject(e)?c((a=e,Array.isArray(a)?[]:{}),e,t):e;var a}function r(e,t,a){return e.concat(t).map((function(e){return n(e,a)}))}function o(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function l(e,t){try{return t in e}catch(a){return!1}}function i(e,t,a){var r={};return a.isMergeableObject(e)&&o(e).forEach((function(t){r[t]=n(e[t],a)})),o(t).forEach((function(o){(function(e,t){return l(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,o)||(l(e,o)&&a.isMergeableObject(t[o])?r[o]=function(e,t){if(!t.customMerge)return c;var a=t.customMerge(e);return"function"===typeof a?a:c}(o,a)(e[o],t[o],a):r[o]=n(t[o],a))})),r}function c(e,a,o){(o=o||{}).arrayMerge=o.arrayMerge||r,o.isMergeableObject=o.isMergeableObject||t,o.cloneUnlessOtherwiseSpecified=n;var l=Array.isArray(a);return l===Array.isArray(e)?l?o.arrayMerge(e,a,o):i(e,a,o):n(a,o)}c.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,a){return c(e,a,t)}),{})};var u=c;e.exports=u},154:function(t){t.exports=e}},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var o=a[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var r={};n.d(r,{default:function(){return D}});var o=n(744),l=n.n(o);const i=/(?:^\[object\s(.*?)\]$)/;var c=e=>Object.prototype.toString.call(e).replace(i,"$1").toLowerCase();const u=e=>{let{componentProps:t,propName:a,props:n}=e,r=n[a];if("object"===c(r)){const e=t[a].default;t[a].default=()=>l()(e,r)}else Array.isArray(r)?t[a].default=()=>r:t[a].default=r},s=e=>{let{componentMixins:t,propName:a,props:n}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[a]){u({componentProps:t[e].props,propName:a,props:n});break}}};var p=(e,t)=>{for(const a of Object.keys(t))e.props?void 0===e.props[a]?s({componentMixins:e.mixins,propName:a,props:t}):u({componentProps:e.props,propName:a,props:t}):s({componentMixins:e.mixins,propName:a,props:t})};var d=e=>{const t={install(t){p(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),t.component(e.name,e)}};return t},m=n(154);const g={cssClasses:{icon:"material-icons"},EVENTS:{CLICK:"click"},getMaterialIconClass:function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];return[g.cssClasses.icon,...t]}};var f=g;const b={icon:{type:String,default:""}};const y=(0,m.createElementVNode)("span",{class:"mdc-button__ripple"},null,-1),v=(0,m.createElementVNode)("span",{class:"mdc-button__focus-ring"},null,-1),S=["textContent"],_={key:1,class:"mdc-button__label"},E={name:"MdcButton",customOptions:{UI_GLOBAL:f}};var N=Object.assign(E,{props:{outlined:{type:Boolean,default:!1},unelevated:{type:Boolean,default:!1},...b,noLabel:{type:Boolean,default:!1}},emits:[f.EVENTS.CLICK],setup(e,t){let{emit:a}=t;const n=e,r=a,{handleClick:o}=function(e){let{emit:t}=e;return{handleClick:function(e){t(g.EVENTS.CLICK,e)}}}({emit:r}),{materialIcon:l}=function(e){return{materialIcon:(0,m.computed)((()=>e.icon||!1))}}(n),i=(0,m.computed)((()=>({"mdc-button":!0,"mdc-button--outlined":n.outlined,"mdc-button--unelevated":n.unelevated})));return(t,a)=>((0,m.openBlock)(),(0,m.createElementBlock)("button",{type:"button",class:(0,m.normalizeClass)(i.value),onClick:a[0]||(a[0]=function(){return(0,m.unref)(o)&&(0,m.unref)(o)(...arguments)})},[y,v,(0,m.renderSlot)(t.$slots,"icon",{},(()=>[(0,m.unref)(l)?((0,m.openBlock)(),(0,m.createElementBlock)("i",{key:0,class:(0,m.normalizeClass)((0,m.unref)(f).getMaterialIconClass("mdc-button__icon")),"aria-hidden":"true",textContent:(0,m.toDisplayString)((0,m.unref)(l))},null,10,S)):(0,m.createCommentVNode)("",!0)])),e.noLabel?(0,m.renderSlot)(t.$slots,"default",{key:0}):((0,m.openBlock)(),(0,m.createElementBlock)("span",_,[(0,m.renderSlot)(t.$slots,"default")]))],2))}});var k=N;const C={class:"mdc-data-table__pagination-trailing"},P={key:0,class:"mdc-data-table__pagination-rows-per-page"},x={class:"mdc-data-table__pagination-rows-per-page-label"},B={class:"mdc-data-table__pagination-rows-per-page-select"},A={class:"mdc-data-table__pagination-navigation"},V={key:0,class:"mdc-data-table__pagination-total"},j={key:2,class:"mdc-data-table__pagination-page"},h={key:1,class:"mdc-button mdc-data-table__pagination-button mdc-pagination__button--ellipsis"},T=[(0,m.createElementVNode)("span",{class:"mdc-button__label"},"...",-1)],w={key:1,class:"mdc-data-table__pagination-jumper"},O={class:"mdc-data-table__pagination-jumper-label"},z={class:"mdc-data-table__pagination-jumper-input"},M=["max"],I={POSITIONS:["left","center","right"],MIN_PAGE_SPAN:3,EVENTS:{CHANGE:"update:modelValue",CHANGE_PAGE_SIZE:"update:pageSize"}},G={name:"UiPagination",customOptions:{UI_GLOBAL:f,UI_PAGINATION:I}};var D=d(Object.assign(G,{props:{modelValue:{type:Number,default:1},total:{type:Number,default:0},pageSpan:{type:[Number,Boolean],default:I.MIN_PAGE_SPAN},showTotal:{type:Boolean,default:!1},pageSize:{type:[Number,Array],default:10},pageSizeText:{type:[String,Array],default:"Rows per page"},ofText:{type:String,default:"of"},unitText:{type:String,default:""},showJumper:{type:Boolean,default:!1},jumperText:{type:[String,Array],default:"Goto"},jumperButtonOutlined:{type:Boolean,default:!1},jumperButtonText:{type:String,default:""},position:{type:String,default:""},mini:{type:Boolean,default:!1}},emits:[I.EVENTS.CHANGE,I.EVENTS.CHANGE_PAGE_SIZE],setup(e,t){let{emit:a}=t;const n=e,r=a,o=(0,m.reactive)({currentPage:n.modelValue,currentPageSize:Array.isArray(n.pageSize)?n.pageSize[0]:n.pageSize,jumpPage:n.modelValue}),{currentPage:l,currentPageSize:i,jumpPage:c}=(0,m.toRefs)(o),u=(0,m.computed)((()=>{let e=["mdc-data-table__pagination","mdc-pagination",{"mdc-pagination--mini":n.mini}];return I.POSITIONS.includes(n.position)&&e.push(`mdc-pagination--${n.position}`),e})),s=(0,m.computed)((()=>Math.ceil(n.total/o.currentPageSize))),p=(0,m.computed)((()=>o.currentPageSize*(o.currentPage-1)+1)),d=(0,m.computed)((()=>{const e=o.currentPageSize*o.currentPage;return e>n.total?n.total:e})),g=(0,m.computed)((()=>n.mini||n.pageSpan&&n.pageSpan>=I.MIN_PAGE_SPAN)),b=(0,m.computed)((()=>Array.isArray(n.pageSizeText)?n.pageSizeText[0]:n.pageSizeText)),y=(0,m.computed)((()=>Array.isArray(n.pageSizeText)?n.pageSizeText[1]:"")),v=(0,m.computed)((()=>Array.isArray(n.jumperText)?n.jumperText[0]:n.jumperText)),S=(0,m.computed)((()=>Array.isArray(n.jumperText)?n.jumperText[1]:""));function _(e){let t=!1;switch(!0){case 1===e:case e===s.value:case o.currentPage>=e&&e>=o.currentPage-n.pageSpan:case o.currentPage<=e&&e<=o.currentPage+n.pageSpan:t=!0}return t}function E(e){let t=o.currentPage===e-n.pageSpan||o.currentPage===e+n.pageSpan,a=1!==e&&e!==s.value;return!(t&&a)}function N(e){switch(!0){case e>s.value:e=s.value;break;case e<1:e=1}return e}function G(e){o.currentPage!==e&&(isNaN(e)?o.jumpPage=o.currentPage:(e=N(e),o.jumpPage=e,r(I.EVENTS.CHANGE,+e)))}function D(){const e=N(o.currentPage);o.currentPage!==e&&(o.jumpPage=e,r(I.EVENTS.CHANGE,+e)),r(I.EVENTS.CHANGE_PAGE_SIZE,{page:e,pageSize:o.currentPageSize,pageCount:s.value})}return(0,m.watch)((()=>n.modelValue),(e=>{o.currentPage=e,o.jumpPage=e})),(0,m.watch)((()=>n.total),(()=>{p.value>d.value&&D()})),(0,m.watch)((()=>n.pageSize),(e=>{Array.isArray(e)||(o.currentPageSize=e)})),(t,a)=>((0,m.openBlock)(),(0,m.createElementBlock)("div",{class:(0,m.normalizeClass)(u.value)},[(0,m.createElementVNode)("div",C,[!e.mini&&Array.isArray(e.pageSize)?((0,m.openBlock)(),(0,m.createElementBlock)("div",P,[(0,m.createElementVNode)("div",x,(0,m.toDisplayString)(b.value),1),(0,m.createElementVNode)("div",B,[(0,m.withDirectives)((0,m.createElementVNode)("select",{"onUpdate:modelValue":a[0]||(a[0]=e=>(0,m.isRef)(i)?i.value=e:null),onChange:D},[((0,m.openBlock)(!0),(0,m.createElementBlock)(m.Fragment,null,(0,m.renderList)(e.pageSize,(e=>((0,m.openBlock)(),(0,m.createElementBlock)("option",{key:`pageSize-${e}`},(0,m.toDisplayString)(e),1)))),128))],544),[[m.vModelSelect,(0,m.unref)(i)]])]),(0,m.createElementVNode)("span",null,(0,m.toDisplayString)(y.value),1)])):(0,m.createCommentVNode)("",!0),(0,m.createElementVNode)("div",A,[e.showTotal?((0,m.openBlock)(),(0,m.createElementBlock)("div",V,[(0,m.renderSlot)(t.$slots,"default",(0,m.normalizeProps)((0,m.guardReactiveProps)({currentMinRow:p.value,currentMaxRow:d.value})),(()=>[(0,m.createTextVNode)((0,m.toDisplayString)(p.value)+"\u2011"+(0,m.toDisplayString)(d.value)+" "+(0,m.toDisplayString)(e.ofText)+" "+(0,m.toDisplayString)(e.total)+" "+(0,m.toDisplayString)(e.unitText),1)]))])):(0,m.createCommentVNode)("",!0),g.value?(0,m.createCommentVNode)("",!0):((0,m.openBlock)(),(0,m.createBlock)(k,{key:1,class:"mdc-data-table__pagination-button mdc-data-table__pagination-first-button","no-label":"",disabled:1===(0,m.unref)(l),"data-first-page":"true",onClick:a[1]||(a[1]=e=>G(1))},{default:(0,m.withCtx)((()=>[(0,m.renderSlot)(t.$slots,"first",{},(()=>[(0,m.createElementVNode)("i",{class:(0,m.normalizeClass)((0,m.unref)(f).cssClasses.icon)},"first_page",2)]))])),_:3},8,["disabled"])),(0,m.createVNode)(k,{class:"mdc-data-table__pagination-button mdc-data-table__pagination-prev-button","no-label":"",disabled:1===(0,m.unref)(l),"data-prev-page":"true",onClick:a[2]||(a[2]=e=>G((0,m.unref)(l)-1))},{default:(0,m.withCtx)((()=>[(0,m.renderSlot)(t.$slots,"prev",{},(()=>[(0,m.createElementVNode)("i",{class:(0,m.normalizeClass)((0,m.unref)(f).cssClasses.icon)},"chevron_left",2)]))])),_:3},8,["disabled"]),!e.mini&&g.value?((0,m.openBlock)(),(0,m.createElementBlock)("div",j,[((0,m.openBlock)(!0),(0,m.createElementBlock)(m.Fragment,null,(0,m.renderList)(s.value,(e=>((0,m.openBlock)(),(0,m.createElementBlock)(m.Fragment,{key:`page-${e}`},[_(e)?((0,m.openBlock)(),(0,m.createElementBlock)(m.Fragment,{key:0},[E(e)?((0,m.openBlock)(),(0,m.createBlock)(k,{key:0,class:(0,m.normalizeClass)({"mdc-data-table__pagination-button":!0,"mdc-pagination__button--active":e===(0,m.unref)(l)}),onClick:t=>G(e)},{default:(0,m.withCtx)((()=>[(0,m.createTextVNode)((0,m.toDisplayString)(e),1)])),_:2},1032,["class","onClick"])):((0,m.openBlock)(),(0,m.createElementBlock)("button",h,T))],64)):(0,m.createCommentVNode)("",!0)],64)))),128))])):(0,m.createCommentVNode)("",!0),(0,m.createVNode)(k,{class:"mdc-data-table__pagination-button mdc-data-table__pagination-next-button",disabled:(0,m.unref)(l)===s.value,"no-label":"","data-next-page":"true",onClick:a[3]||(a[3]=e=>G((0,m.unref)(l)+1))},{default:(0,m.withCtx)((()=>[(0,m.renderSlot)(t.$slots,"next",{},(()=>[(0,m.createElementVNode)("i",{class:(0,m.normalizeClass)((0,m.unref)(f).cssClasses.icon)},"chevron_right",2)]))])),_:3},8,["disabled"]),g.value?(0,m.createCommentVNode)("",!0):((0,m.openBlock)(),(0,m.createBlock)(k,{key:3,class:"mdc-data-table__pagination-button mdc-data-table__pagination-last-button",disabled:(0,m.unref)(l)===s.value,"no-label":"","data-last-page":"true",onClick:a[4]||(a[4]=e=>G(s.value))},{default:(0,m.withCtx)((()=>[(0,m.renderSlot)(t.$slots,"last",{},(()=>[(0,m.createElementVNode)("i",{class:(0,m.normalizeClass)((0,m.unref)(f).cssClasses.icon)},"last_page",2)]))])),_:3},8,["disabled"]))]),!e.mini&&e.showJumper?((0,m.openBlock)(),(0,m.createElementBlock)("div",w,[(0,m.createElementVNode)("div",O,(0,m.toDisplayString)(v.value),1),(0,m.createElementVNode)("div",z,[(0,m.withDirectives)((0,m.createElementVNode)("input",{"onUpdate:modelValue":a[5]||(a[5]=e=>(0,m.isRef)(c)?c.value=e:null),type:"number",min:"1",max:s.value,onKeydown:a[6]||(a[6]=(0,m.withKeys)((0,m.withModifiers)((e=>G(e.target.value)),["prevent"]),["enter"]))},null,40,M),[[m.vModelText,(0,m.unref)(c)]]),(0,m.createElementVNode)("span",null,(0,m.toDisplayString)(S.value),1),e.jumperButtonText?((0,m.openBlock)(),(0,m.createBlock)(k,{key:0,outlined:e.jumperButtonOutlined,unelevated:!e.jumperButtonOutlined,onClick:a[7]||(a[7]=e=>G((0,m.unref)(c)))},{default:(0,m.withCtx)((()=>[(0,m.createTextVNode)((0,m.toDisplayString)(e.jumperButtonText),1)])),_:1},8,["outlined","unelevated"])):(0,m.createCommentVNode)("",!0)])])):(0,m.createCommentVNode)("",!0)])],2))}}));return r=r.default}()}));