vexip-ui/lib/components/pagination/pagination.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const t=require("vue");require("../icon/index.cjs");require("../number-input/index.cjs");require("../renderer/index.cjs");require("../select/index.cjs");const p=require("@vexip-ui/config"),R=require("@vexip-ui/hooks"),g=require("@vexip-ui/utils"),ce=require("./props.cjs"),W=require("../renderer/renderer.cjs"),N=require("../icon/icon.cjs"),ve=require("../select/select.vue2.cjs"),fe=require("../number-input/number-input.vue2.cjs");function C(m){return typeof m=="function"||Object.prototype.toString.call(m)==="[object Object]"&&!t.isVNode(m)}var h=function(m){return m.LEFT="left",m.CENTER="center",m.RIGHT="right",m}(h||{});const pe=t.defineComponent({name:"Pagination",props:ce.paginationProps,emits:["update:active","update:page-size"],setup(m,{slots:T,emit:H,expose:D}){const n=p.useProps("pagination",m,{size:p.createSizeProp(),locale:null,total:{default:0,validator:e=>e>=0,static:!0},noBorder:!1,background:!1,pageSize:{default:10,validator:e=>e>0},sizeOptions:()=>[10,20,50,100],itemCount:{default:7,validator:e=>Number.isInteger(e)&&e>6},active:{default:1,validator:e=>e>0,static:!0},disabled:!1,disableItem:{default:()=>!1,isFunc:!0},turnPageCount:5,itemUnit:null,plugins:{default:()=>[],validator:e=>Array.isArray(e)},noTitle:!1,itemTag:"li",listTag:null,slots:()=>({})}),{isRtl:w}=R.useRtl(),i=p.useNameHelper("pagination"),v=p.useIcons(),L=t.ref([]),s=t.ref(n.active),E=t.ref(n.pageSize),y=t.ref(h.LEFT),S=t.ref(!1),I=t.ref(!1),_=t.ref(n.active),d=t.reactive([]),c=p.useLocale("pagination",t.toRef(n,"locale")),{target:A}=R.useModifier({passive:!1,onKeyDown:(e,l)=>{n.disabled||g.decide([[()=>l.up||l.down||l.left||l.right,()=>{const a=l.up||l.left?-1:1;if(g.isClient&&document.activeElement){const u=d.findIndex(P=>P===document.activeElement);if(!~u)return;d[g.boundRange(u+a,0,d.length-1)].focus()}}],[()=>l.enter||l.space,()=>{if(document&&document.activeElement&&!~d.findIndex(u=>u===document.activeElement)){const u=i.bem("item","active"),o=d.find(P=>P.classList.contains(u));o==null||o.focus()}}]],{beforeMatchAny:()=>e.preventDefault(),afterMatchAny:l.resetAll})}}),Q=t.computed(()=>({[i.b()]:!0,[i.bs("vars")]:!0,[i.bm("inherit")]:n.inherit,[i.bm(n.size)]:n.size!=="default",[i.bm("background")]:n.background,[i.bm("no-border")]:n.noBorder,[i.bm("disabled")]:n.disabled})),r=t.computed(()=>Math.ceil(n.total/(E.value||1))||1),j=t.computed(()=>r.value>n.itemCount),K=t.computed(()=>{const e=f(1,1);return e>=r.value||s.value===e}),$=t.computed(()=>{const e=f(r.value,-1);return e<=1||s.value===e}),J=t.computed(()=>`${c.value.prev} ${p.getCountWord(c.value.page,n.turnPageCount)}`),G=t.computed(()=>`${c.value.next} ${p.getCountWord(c.value.page,n.turnPageCount)}`),k=t.computed(()=>{if(!j.value)return 0;let e=f(s.value-n.turnPageCount,-1);return e<1&&(e=f(1,1),e>=s.value)?0:e}),z=t.computed(()=>{if(!j.value)return 0;let e=f(s.value+n.turnPageCount,1);return e>r.value&&(e=f(r.value,-1),e<=s.value)?0:e}),X=t.computed(()=>n.sizeOptions.map(e=>({value:e,label:`${e} ${c.value.perPage}`}))),x=t.computed(()=>{const e=n.plugins,l=e.findIndex(g.isNull);return{total:e.findIndex(a=>a==="total")-l,size:e.findIndex(a=>a==="size")-l,jump:e.findIndex(a=>a==="jump")-l}}),Y=t.computed(()=>{if(!n.plugins.includes("jump"))return 0;let e=0;return n.plugins.includes("size")?e=Math.ceil(n.total/(Math.min(...n.sizeOptions)||10)):e=Math.ceil(n.total/(n.pageSize||10)),e.toString().length*10+30});t.watch(()=>n.active,e=>{b(e,!1)}),t.watch(()=>n.itemCount,V),t.watch(r,V),t.watch(()=>n.pageSize,e=>{E.value=e}),t.watch(E,(e,l)=>{H("update:page-size",e),p.emitEvent(n.onPageSizeChange,e);const a=Math.ceil((l*(s.value-1)+1)/e);let u=f(a,1);u>r.value&&(u=f(a-1,-1),u<1&&(u=0)),s.value=u,V()}),D({changeActive:b,handlePrev:q,handleNext:M}),t.onMounted(()=>{t.nextTick(V)}),t.onUpdated(()=>{A.value&&(d.length=0,d.push(...Array.from(A.value.querySelectorAll(`${i.cbe("item")}:not(${i.cbem("item","disabled")})`))))});function f(e,l){for(l=l/Math.abs(l);n.disableItem(e)&&(e+=l,!(e<1||e>r.value)););return e}function B(e){s.value!==e&&(s.value=e,_.value=e,V(),H("update:active",e),p.emitEvent(n.onChange,e))}function b(e,l=!0){if(e=parseInt(e.toString()),!(n.disabled||e<1||e>r.value||n.disableItem(e))&&(B(e),g.isClient&&l)){const a=d.find(u=>u===document.activeElement);a==null||a.blur(),t.nextTick(()=>{var u;(u=d.find(o=>o.tabIndex>=0))==null||u.focus()})}}function q(){if(!K.value&&!n.disabled){const e=f(s.value-1,-1);e>=1&&b(e)}}function M(){if(!$.value&&!n.disabled){const e=f(s.value+1,1);e<=r.value&&b(e)}}function V(){let e;if(r.value<=n.itemCount)e=g.range(r.value);else{const l=n.itemCount-2,a=Math.ceil(n.itemCount/2);if(s.value<a)e=g.range(l),e.push(r.value),y.value=h.LEFT;else if(s.value<=r.value-a){let u=l-2;u%2===0&&(u-=1),e=g.range(u,s.value-(u-1)/2),e.unshift(1),e.push(r.value),y.value=h.CENTER}else e=g.range(l,r.value-l+1),e.unshift(1),y.value=h.RIGHT}e.length===1&&(L.value=[]),L.value=e.slice(1,-1)}function Z(){S.value=!0}function ee(){S.value=!1}function O(){!n.disabled&&k.value&&b(k.value)}function te(){I.value=!0}function ne(){I.value=!1}function U(){!n.disabled&&z.value&&b(z.value)}function le(e){e=Math.max(Math.min(parseInt(e.toString()),r.value),1);const l=e;if(e!==s.value){const a=e>s.value?1:-1;e=f(l,a),(a>0?e>r.value:e<1)&&(e=f(l,-a),(a>0?e<1:e>r.value)&&(e=0)),B(e)}t.nextTick(()=>{_.value=s.value})}function ae(e){let l;const a=n.disabled||K.value,u=w.value?v.value.angleRight:v.value.angleLeft;return t.createVNode(e,{ref:o=>o&&!K.value&&d.push(o),class:[i.be("item"),i.bem("item","prev"),a?i.bem("item","disabled"):""],title:n.noTitle?void 0:c.value.prevPage,role:"menuitem",tabindex:"-1","aria-label":c.value.prevPage,"aria-hidden":a?"true":void 0,onClick:q,onKeydownEnter:q,onKeydownSpace:q},C(l=t.renderSlot(T,"prev",{disabled:a},()=>[t.createVNode(W,{renderer:n.slots.prev,data:{disabled:a}},{default:()=>[t.createVNode(N,t.mergeProps(u,{scale:+(u.scale||1)}),null)]})]))?l:{default:()=>[l]})}function ue(e){let l;const a=n.disabled||$.value,u=w.value?v.value.angleLeft:v.value.angleRight;return t.createVNode(e,{ref:o=>o&&!$.value&&d.push(o),class:[i.be("item"),i.bem("item","next"),a?i.bem("item","disabled"):""],title:n.noTitle?void 0:c.value.nextPage,role:"menuitem",tabindex:"-1","aria-label":c.value.nextPage,"aria-hidden":a?"true":void 0,onClick:M,onKeydownEnter:M,onKeydownSpace:M},C(l=t.renderSlot(T,"next",{disabled:a},()=>[t.createVNode(W,{renderer:n.slots.next,data:{disabled:a}},{default:()=>[t.createVNode(N,t.mergeProps(u,{scale:+(u.scale||1)}),null)]})]))?l:{default:()=>[l]})}function ie(e){let l;if(!j.value||y.value===h.LEFT)return null;const a=n.disabled||!k.value;return t.createVNode(e,{ref:u=>u&&k.value&&d.push(u),class:{[i.be("item")]:!0,[i.bem("item","more")]:!0,[i.bem("item","disabled")]:a},title:n.noTitle?void 0:J.value,role:"menuitem",tabindex:"-1","aria-label":J.value,onClick:O,onKeydownEnter:O,onKeydownSpace:O,onMouseenter:Z,onMouseleave:ee},C(l=R.createSlotRender(T,["prev-jump","prevJump"],()=>{const u=w.value?v.value.anglesRight:v.value.anglesLeft;return t.createVNode(t.Transition,{name:i.ns("fade")},{default:()=>[!a&&S.value?t.createVNode(N,t.mergeProps(u,{scale:+(u.scale||1)}),null):t.createVNode(N,t.mergeProps(v.value.ellipsis,{scale:+(v.value.ellipsis.scale||1),style:"position: absolute"}),null)]})})({disabled:a,entered:S.value}))?l:{default:()=>[l]})}function re(e){let l;if(!j.value||y.value===h.RIGHT)return null;const a=n.disabled||!z.value;return t.createVNode(e,{ref:u=>u&&z.value&&d.push(u),class:{[i.be("item")]:!0,[i.bem("item","more")]:!0,[i.bem("item","disabled")]:a},title:n.noTitle?void 0:G.value,role:"menuitem",tabindex:"-1","aria-label":G.value,onClick:U,onKeydownEnter:U,onKeydownSpace:U,onMouseenter:te,onMouseleave:ne},C(l=R.createSlotRender(T,["next-jump","nextJump"],()=>{const u=w.value?v.value.anglesLeft:v.value.anglesRight;return t.createVNode(t.Transition,{name:i.ns("fade")},{default:()=>[!a&&I.value?t.createVNode(N,t.mergeProps(u,{scale:+(u.scale||1)}),null):t.createVNode(N,t.mergeProps(v.value.ellipsis,{scale:+(v.value.ellipsis.scale||1),style:"position: absolute"}),null)]})})({disabled:!z.value,entered:I.value}))?l:{default:()=>[l]})}function F(e,l){let a;const u=n.disabled||n.disableItem(l),o=s.value===l;return t.createVNode(e,{ref:P=>P&&d.push(P),class:{[i.be("item")]:!0,[i.bem("item","disabled")]:u,[i.bem("item","active")]:o},title:n.noTitle?void 0:l,role:"menuitemradio",tabindex:o?"0":"-1","aria-posinset":l,"aria-setsize":r.value,"aria-disabled":u?"true":void 0,onClick:()=>b(l),onKeydownEnter:()=>b(l),onKeydownSpace:()=>b(l)},C(a=t.renderSlot(T,"item",{page:l,disabled:u,active:o},()=>[t.createVNode(W,{renderer:n.slots.item,data:{page:l,disabled:u,active:o}},C(l)?l:{default:()=>[l]})]))?a:{default:()=>[a]})}function se(){return n.plugins.includes("total")?t.createVNode("div",{class:[i.be("total"),x.value.total<0&&i.bem("total","prefix")],style:{order:x.value.total}},[`${c.value.total} ${p.getCountWord(n.itemUnit??c.value.itemUnit,n.total)}`]):null}function oe(){return n.plugins.includes("size")?t.createVNode("div",{class:[i.be("size"),x.value.size<0&&i.bem("size","prefix")],style:{order:x.value.size}},[t.createVNode(ve,{value:E.value,"onUpdate:value":e=>E.value=e,inherit:!0,class:i.be("size-select"),options:X.value,filter:!1,multiple:!1,clearable:!1},null)]):null}function de(){return n.plugins.includes("jump")?t.createVNode("div",{class:[i.be("jump"),x.value.jump<0&&i.bem("jump","prefix")],style:{order:x.value.jump}},[c.value.jumpTo,t.createVNode(fe,{value:_.value,"onUpdate:value":e=>_.value=e,inherit:!0,class:i.be("jump-input"),clearable:!1,sync:!1,style:{width:`${Y.value}px`},onChange:le},null),p.getCountWordOnly(c.value.page,1)]):null}return()=>{const e=n.itemTag||"li",l=n.listTag||(e==="li"?"ul":"div");return t.createVNode("div",{class:Q.value},[t.createVNode(l,{ref:A,class:i.be("list"),role:"menubar","aria-label":"Pagination","aria-disabled":n.disabled?"true":void 0},{default:()=>[ae(e),F(e,1),ie(e),L.value.map(a=>F(e,a)),re(e),r.value>1&&F(e,r.value),ue(e)]}),se(),oe(),de()])}}});module.exports=pe;
//# sourceMappingURL=pagination.cjs.map