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"),$=require("../input/index.cjs"),L=require("../select/index.cjs"),K=require("../utils/index.cjs"),A={key:0,class:"pagination-total-text"},T=["onKeydown","onClick"],j={key:1,class:"pagination-options"},O={key:1,class:"pagination-jump-page"},D=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),w=e.ref(null),c=e.ref(),g=e.ref(!1),p=e.ref(!1),{colorPalettes:h}=K.useInject("Pagination"),v=V,s=e.computed(()=>Math.ceil(o.total/r.value)),b=e.computed(()=>{if(typeof o.showTotal=="boolean"){if(o.showTotal)return`共 ${o.total} 条`}else{const t=(l.value-1)*r.value+1,a=l.value*r.value>o.total?o.total:l.value*r.value;return o.showTotal(o.total,[t,a])}return null}),f=e.computed(()=>B(l.value).filter(t=>t!==1&&t!==s.value)),y=e.computed(()=>typeof o.showSizeChanger=="boolean"?o.showSizeChanger:o.total>50),x=e.computed(()=>{const t=[r.value,...o.pageSizeOptions].map(a=>Number(a));return Array.from(new Set(t)).sort((a,i)=>a-i).map(a=>({label:`${a} 条/页`,value:a}))}),S=e.computed(()=>{const t={small:24,middle:28,large:32};return t[o.size]||t.large}),z=e.computed(()=>o.size==="small"?"small":"middle");e.watch(()=>o.page,t=>{l.value=t}),e.watch(()=>o.pageSize,t=>{r.value=t});function B(t){const a=[],i=Math.floor(o.pageAmount/2),u={start:t-i,end:t+i};u.start<1&&(u.end=u.end+(1-u.start),u.start=1),u.end>s.value&&(u.start=u.start-(u.end-s.value),u.end=s.value),u.start<1&&(u.start=1),u.start>1?g.value=!0:g.value=!1,u.end<s.value?p.value=!0:p.value=!1;for(let m=u.start;m<=u.end;m++)a.push(m);return a}function k(){l.value=l.value-o.pageAmount>0?l.value-o.pageAmount:1,v("update:page",l.value),v("change",l.value,r.value)}function C(){l.value=l.value+o.pageAmount<s.value?l.value+o.pageAmount:s.value,v("update:page",l.value),v("change",l.value,r.value)}async function N(){let t=Number(c.value);c.value&&Number.isInteger(t)&&(t<1&&(t=1),t>s.value&&(t=s.value),d(t)),await e.nextTick(),c.value=void 0}async function P(t){await e.nextTick();const a=f.value.findIndex(i=>i===t);w.value?.[a].focus()}function d(t,a=!1){if(t===0||t===s.value+1)return!1;l.value!==t&&(l.value=t,a&&P(t),v("update:page",l.value),v("change",l.value,r.value))}function E(t,a){t.target.focus(),d(a)}function M(t){r.value=t;const a=Math.ceil(o.total/t);l.value>a&&(l.value=a),v("update:page",l.value),v("update:pageSize",r.value),v("pageSizeChange",l.value,r.value),v("change",l.value,r.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["pagination-wrap",[`pagination-${n.placement}`,{"pagination-small":n.size==="small","pagination-middle":n.size==="middle","pagination-disabled":n.disabled,"pagination-hidden":!n.total||n.hideOnSinglePage&&n.total<=r.value}]]),style:e.normalizeStyle(`--pagination-primary-color: ${e.unref(h)[5]}; --pagination-primary-color-focus-visible: ${e.unref(h)[2]};`)},[b.value?(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(b.value),1)):e.createCommentVNode("",!0),e.createElementVNode("span",{tabindex:"0",class:e.normalizeClass(["pagination-prev",{"pagination-item-disabled":l.value===1}]),onKeydown:a[0]||(a[0]=e.withKeys(e.withModifiers(i=>n.disabled?()=>!1:d(l.value-1),["prevent"]),["enter"])),onClick:a[1]||(a[1]=i=>n.disabled||l.value===1?()=>!1:d(l.value-1))},[...a[14]||(a[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:a[2]||(a[2]=e.withKeys(e.withModifiers(i=>n.disabled?()=>!1:d(1),["prevent"]),["enter"])),onClick:a[3]||(a[3]=i=>n.disabled?()=>!1:d(1))}," 1 ",34),e.withDirectives(e.createElementVNode("span",{tabindex:"0",ref:"forward",class:"pagintion-jump-prev",onKeydown:a[4]||(a[4]=e.withKeys(e.withModifiers(i=>n.disabled?()=>!1:k(),["prevent"]),["enter"])),onClick:a[5]||(a[5]=i=>n.disabled?()=>!1:k())},[...a[15]||(a[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,g.value&&f.value[0]-1>1]]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(i,u)=>(e.openBlock(),e.createElementBlock("span",{ref_for:!0,ref_key:"pageListRef",ref:w,tabindex:"0",class:e.normalizeClass(["pagination-item",{"pagination-item-active":l.value===i}]),key:u,onKeydown:e.withKeys(e.withModifiers(m=>n.disabled?()=>!1:d(i,!0),["prevent"]),["enter"]),onClick:m=>n.disabled?()=>!1:d(i,!0)},e.toDisplayString(i),43,T))),128)),e.withDirectives(e.createElementVNode("span",{tabindex:"0",ref:"backward",class:"pagintion-jump-next",onKeydown:a[6]||(a[6]=e.withKeys(e.withModifiers(i=>n.disabled?()=>!1:C(),["prevent"]),["enter"])),onClick:a[7]||(a[7]=i=>n.disabled?()=>!1:C())},[...a[16]||(a[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,p.value&&f.value[f.value.length-1]+1<s.value]]),e.withDirectives(e.createElementVNode("span",{tabindex:"0",class:e.normalizeClass(["pagination-item",{"pagination-item-active":l.value===s.value}]),onKeydown:a[8]||(a[8]=e.withKeys(e.withModifiers(i=>n.disabled?()=>!1:d(s.value),["prevent"]),["enter"])),onClick:a[9]||(a[9]=i=>n.disabled?()=>!1:d(s.value))},e.toDisplayString(s.value),35),[[e.vShow,s.value!==1]]),e.createElementVNode("span",{tabindex:"0",class:e.normalizeClass(["pagination-next",{"pagination-item-disabled":l.value===s.value}]),onKeydown:a[10]||(a[10]=e.withKeys(e.withModifiers(i=>n.disabled?()=>!1:d(l.value+1),["prevent"]),["enter"])),onClick:a[11]||(a[11]=i=>n.disabled||l.value===s.value?()=>!1:E(i,l.value+1))},[...a[17]||(a[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),y.value||n.showQuickJumper?(e.openBlock(),e.createElementBlock("span",j,[y.value?(e.openBlock(),e.createBlock(e.unref(L.default),e.mergeProps({key:0,size:z.value,height:S.value,disabled:n.disabled,options:x.value,modelValue:r.value,"onUpdate:modelValue":a[12]||(a[12]=i=>r.value=i),onChange:M},n.changerProps),null,16,["size","height","disabled","options","modelValue"])):e.createCommentVNode("",!0),n.showQuickJumper?(e.openBlock(),e.createElementBlock("span",O,[a[18]||(a[18]=e.createTextVNode(" 跳至",-1)),e.createVNode(e.unref($.default),e.mergeProps({width:50,size:z.value,disabled:n.disabled,value:c.value,"onUpdate:value":a[13]||(a[13]=i=>c.value=i),valueModifiers:{lazy:!0},onChange:N,onEnter:N},n.jumperProps),null,16,["size","disabled","value"]),a[19]||(a[19]=e.createTextVNode("页 ",-1))])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],6))}});exports.default=D;