vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
2 lines (1 loc) • 9.05 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),L=require("../input/index.cjs"),K=require("../select/index.cjs"),A=require("../utils/index.cjs"),T={key:0,class:"pagination-total-text"},j=["onKeydown","onClick"],O={key:1,class:"pagination-options"},D={key:1,class:"pagination-jump-page"},H=e.defineComponent({__name:"Pagination",props:{page:{default:1},pageSize:{default:10},total:{default:0},disabled:{type:Boolean,default:!1},pageAmount:{default:5},hideOnSinglePage:{type:Boolean,default:!1},showQuickJumper:{type:Boolean,default:!1},jumperProps:{default:()=>({})},showSizeChanger:{type:Boolean,default:void 0},changerProps:{default:()=>({})},pageSizeOptions:{default:()=>[10,20,50,100]},showTotal:{type:[Boolean,Function],default:!1},placement:{default:"center"},size:{default:"large"}},emits:["update:page","update:pageSize","change","pageSizeChange"],setup(N,{emit:V}){const o=N,l=e.ref(o.page),r=e.ref(o.pageSize),c=e.ref(null),v=e.ref(),m=e.ref(!1),g=e.ref(!1),{colorPalettes:w}=A.useInject("Pagination"),d=V,i=e.computed(()=>Math.ceil(o.total/r.value)),h=e.computed(()=>{if(typeof o.showTotal=="boolean"){if(o.showTotal)return`共 ${o.total} 条`}else{const a=(l.value-1)*r.value+1,t=l.value*r.value>o.total?o.total:l.value*r.value;return o.showTotal(o.total,[a,t])}return null}),p=e.computed(()=>P(l.value).filter(a=>a!==1&&a!==i.value)),b=e.computed(()=>typeof o.showSizeChanger=="boolean"?o.showSizeChanger:o.total>50),S=e.computed(()=>{const a=[r.value,...o.pageSizeOptions].map(t=>Number(t));return Array.from(new Set(a)).sort((t,n)=>t-n).map(t=>({label:`${t} 条/页`,value:t}))}),B=e.computed(()=>{const a={small:24,middle:28,large:32};return a[o.size]||a.large}),y=e.computed(()=>o.size==="small"?"small":"middle");e.watch(()=>o.page,a=>{l.value=a}),e.watch(()=>o.pageSize,a=>{r.value=a});function P(a){const t=[],n=Math.floor(o.pageAmount/2),s={start:a-n,end:a+n};s.start<1&&(s.end=s.end+(1-s.start),s.start=1),s.end>i.value&&(s.start=s.start-(s.end-i.value),s.end=i.value),s.start<1&&(s.start=1),s.start>1?m.value=!0:m.value=!1,s.end<i.value?g.value=!0:g.value=!1;for(let f=s.start;f<=s.end;f++)t.push(f);return t}function z(){l.value=l.value-o.pageAmount>0?l.value-o.pageAmount:1,d("update:page",l.value),d("change",l.value,r.value)}function k(){l.value=l.value+o.pageAmount<i.value?l.value+o.pageAmount:i.value,d("update:page",l.value),d("change",l.value,r.value)}async function C(){let a=Number(v.value);v.value&&Number.isInteger(a)&&(a<1&&(a=1),a>i.value&&(a=i.value),u(a)),await e.nextTick(),v.value=void 0}async function E(a){await e.nextTick();const t=p.value.findIndex(n=>n===a);c.value?.[t].focus()}function u(a,t=!1){if(a===0||a===i.value+1)return!1;l.value!==a&&(l.value=a,t&&E(a),d("update:page",l.value),d("change",l.value,r.value))}function M(a,t){a.target.focus(),u(t)}function $(a){r.value=a;const t=Math.ceil(o.total/a);l.value>t&&(l.value=t),d("update:page",l.value),d("update:pageSize",r.value),d("pageSizeChange",l.value,r.value),d("change",l.value,r.value)}return(a,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["pagination-wrap",[`pagination-${a.placement}`,{"pagination-small":a.size==="small","pagination-middle":a.size==="middle","pagination-disabled":a.disabled,"pagination-hidden":!a.total||a.hideOnSinglePage&&a.total<=r.value}]]),style:e.normalizeStyle(`--pagination-primary-color: ${e.unref(w)[5]}; --pagination-primary-color-focus-visible: ${e.unref(w)[2]};`)},[h.value?(e.openBlock(),e.createElementBlock("span",T,e.toDisplayString(h.value),1)):e.createCommentVNode("",!0),e.createElementVNode("span",{tabindex:"0",class:e.normalizeClass(["pagination-prev",{"pagination-item-disabled":l.value===1}]),onKeydown:t[0]||(t[0]=e.withKeys(e.withModifiers(n=>a.disabled?()=>!1:u(l.value-1),["prevent"]),["enter"])),onClick:t[1]||(t[1]=n=>a.disabled||l.value===1?()=>!1:u(l.value-1))},[...t[14]||(t[14]=[e.createElementVNode("svg",{class:"arrow-svg",viewBox:"64 64 896 896","data-icon":"left",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},[e.createElementVNode("path",{d:"M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"})],-1)])],34),e.createElementVNode("span",{tabindex:"0",class:e.normalizeClass(["pagination-item",{"pagination-item-active":l.value===1}]),onKeydown:t[2]||(t[2]=e.withKeys(e.withModifiers(n=>a.disabled?()=>!1:u(1),["prevent"]),["enter"])),onClick:t[3]||(t[3]=n=>a.disabled?()=>!1:u(1))}," 1 ",34),e.withDirectives(e.createElementVNode("span",{tabindex:"0",ref:"forward",class:"pagintion-jump-prev",onKeydown:t[4]||(t[4]=e.withKeys(e.withModifiers(n=>a.disabled?()=>!1:z(),["prevent"]),["enter"])),onClick:t[5]||(t[5]=n=>a.disabled?()=>!1:z())},[...t[15]||(t[15]=[e.createElementVNode("span",{class:"ellipsis-character"},"•••",-1),e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"double-left",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"})],-1)])],544),[[e.vShow,m.value&&p.value[0]-1>1]]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(n,s)=>(e.openBlock(),e.createElementBlock("span",{ref_for:!0,ref_key:"pageListRef",ref:c,tabindex:"0",class:e.normalizeClass(["pagination-item",{"pagination-item-active":l.value===n}]),key:s,onKeydown:e.withKeys(e.withModifiers(f=>a.disabled?()=>!1:u(n,!0),["prevent"]),["enter"]),onClick:f=>a.disabled?()=>!1:u(n,!0)},e.toDisplayString(n),43,j))),128)),e.withDirectives(e.createElementVNode("span",{tabindex:"0",ref:"backward",class:"pagintion-jump-next",onKeydown:t[6]||(t[6]=e.withKeys(e.withModifiers(n=>a.disabled?()=>!1:k(),["prevent"]),["enter"])),onClick:t[7]||(t[7]=n=>a.disabled?()=>!1:k())},[...t[16]||(t[16]=[e.createElementVNode("span",{class:"ellipsis-character"},"•••",-1),e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"double-right",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"})],-1)])],544),[[e.vShow,g.value&&p.value[p.value.length-1]+1<i.value]]),e.withDirectives(e.createElementVNode("span",{tabindex:"0",class:e.normalizeClass(["pagination-item",{"pagination-item-active":l.value===i.value}]),onKeydown:t[8]||(t[8]=e.withKeys(e.withModifiers(n=>a.disabled?()=>!1:u(i.value),["prevent"]),["enter"])),onClick:t[9]||(t[9]=n=>a.disabled?()=>!1:u(i.value))},e.toDisplayString(i.value),35),[[e.vShow,i.value!==1]]),e.createElementVNode("span",{tabindex:"0",class:e.normalizeClass(["pagination-next",{"pagination-item-disabled":l.value===i.value}]),onKeydown:t[10]||(t[10]=e.withKeys(e.withModifiers(n=>a.disabled?()=>!1:u(l.value+1),["prevent"]),["enter"])),onClick:t[11]||(t[11]=n=>a.disabled||l.value===i.value?()=>!1:M(n,l.value+1))},[...t[17]||(t[17]=[e.createElementVNode("svg",{class:"arrow-svg",viewBox:"64 64 896 896","data-icon":"right",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},[e.createElementVNode("path",{d:"M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"})],-1)])],34),b.value||a.showQuickJumper?(e.openBlock(),e.createElementBlock("span",O,[b.value?(e.openBlock(),e.createBlock(e.unref(K.default),e.mergeProps({key:0,size:y.value,height:B.value,disabled:a.disabled,options:S.value,modelValue:r.value,"onUpdate:modelValue":t[12]||(t[12]=n=>r.value=n),onChange:$},a.changerProps),null,16,["size","height","disabled","options","modelValue"])):e.createCommentVNode("",!0),a.showQuickJumper?(e.openBlock(),e.createElementBlock("span",D,[t[18]||(t[18]=e.createTextVNode(" 跳至",-1)),e.createVNode(e.unref(L.default),e.mergeProps({width:50,size:y.value,disabled:a.disabled,value:v.value,"onUpdate:value":t[13]||(t[13]=n=>v.value=n),valueModifiers:{lazy:!0},onChange:C,onEnter:C},a.jumperProps),null,16,["size","disabled","value"]),t[19]||(t[19]=e.createTextVNode("页 ",-1))])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],6))}});exports.default=H;