@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 15.1 kB
JavaScript
(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../locale/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../locale/index.umd.js","../designer-canvas/index.umd.js","../common/index.umd.js"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.pagination={},f.Vue,f.dynamicResolver,f.locale,f.designerCanvas,f.common))})(this,function(f,e,D,C,Y,Z){"use strict";const ee=new Map([["appearance",D.resolveAppearance]]),te={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/pagination.schema.json",title:"pagination",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for a pagination",type:"string"},type:{description:"The type string of pagination component",type:"string",default:"pagination"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},editable:{description:"",type:"boolean",default:!0},enableLinkLabel:{description:"",type:"boolean",default:!1},label:{description:"",type:"string",default:""},lableWidth:{description:"",type:"number"},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},required:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},textAlign:{description:"",type:"string",enum:["left","middle","right"],default:"left"},visible:{description:"",type:"boolean",default:!0},onBlur:{description:"",type:"string",default:""},onClickLinkLabel:{description:"",type:"string",default:""}},required:["id","type"]},ae={title:"pagination",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}},behavior:{description:"Basic Infomation",title:"行为",properties:{editable:{description:"",title:"允许编辑",type:"boolean"},readonly:{description:"",title:"只读",type:"string"},required:{description:"",title:"必填",type:"boolean"},visible:{description:"",title:"可见",type:"boolean"},placeholder:{description:"",title:"提示文本",type:"string"},tabindex:{description:"",title:"tab索引",type:"number"},textAlign:{description:"",title:"对齐方式",type:"enum",editor:{type:"combo-list",textField:"name",valueField:"value",data:[{value:"left",name:"左对齐"},{value:"center",name:"居中"},{value:"right",name:"右对齐"}]}}}}}};function ne(t,a,p){return a}const O={currentPage:{type:Number,default:1},disabled:{type:Boolean,default:!1},mode:{type:String,default:"default"},pageSize:{type:Number,default:20},totalItems:{type:Number,default:0},showGoButton:{type:Boolean,default:!1},showPageList:{type:Boolean,default:!0},showPageNumbers:{type:Boolean,default:!0},showRedirection:{type:Boolean,default:!0},pageList:{type:Array,default:[20,50,100]},showPageInfo:{type:Boolean,default:!1}},q=D.createPropsResolver(O,te,ee,ne,ae);function W(t,a,p,r){const o=e.computed(()=>C.LocaleService.getLocaleValue("pagination.goto.prefix")),s=e.ref(""),n=e.ref(t.value);e.watch(t,u=>{n.value!==u&&(n.value=u)});function l(u){return!isNaN(u)&&u>=1&&u<=a.value}function c(u){const b=t.value;n.value=u.target.valueAsNumber,l(n.value)?t.value=n.value:n.value=b,r.emit("update:currentPage",t.value),r.emit("changed",{pageIndex:t.value,pageSize:p.value}),r.emit("pageIndexChanged",{pageIndex:t.value,pageSize:p.value})}function i(u){u.key==="Enter"&&c(u)}function d(){return e.createVNode("li",{class:"page-goto-input d-flex flex-row",style:"padding-left: 10px; white-space: nowrap;"},[e.createVNode("span",{class:"pagination-message"},[o.value]),e.createVNode("input",{title:"page-index-spinner",type:"number",class:"form-control farris-gotopagenumber",value:n.value,min:1,max:a.value,style:"display: inline-block;margin-left:3px;",onBlur:u=>c(u),onKeyup:u=>i(u)},null),s.value])}return{renderGotoButton:d}}function H(t,a,p,r,o){const s=e.computed(()=>({"page-item":!0,disabled:a.value}));function n(d){t.value=t.value<p.value?t.value+1:p.value,o.emit("update:currentPage",t.value),o.emit("changed",{pageIndex:t.value,pageSize:r.value}),o.emit("pageIndexChanged",{pageIndex:t.value,pageSize:r.value})}function l(d){t.value=p.value,o.emit("update:currentPage",t.value),o.emit("changed",{pageIndex:t.value,pageSize:r.value}),o.emit("pageIndexChanged",{pageIndex:t.value,pageSize:r.value})}function c(){return e.createVNode("li",{class:s.value},[!a.value&&e.createVNode("a",{class:"page-link",tabindex:"0",onClick:d=>n()},[e.createVNode("span",{class:"f-icon f-page-next"},null)]),a.value&&e.createVNode("span",{class:"page-link"},[e.createVNode("span",{class:"f-icon f-page-next"},null)])])}function i(){return e.createVNode("li",{class:s.value},[!a.value&&e.createVNode("a",{class:"page-link",tabindex:"0",onClick:d=>l()},[e.createVNode("span",{class:"f-icon f-page-last"},null)]),a.value&&e.createVNode("span",{class:"page-link"},[e.createVNode("span",{class:"f-icon f-page-last"},null)])])}return{renderLastPage:i,renderNextPage:c}}function _(t,a){const p=e.computed(()=>C.LocaleService.getLocaleValue("pagination.totalInfo.firstText")),r=e.computed(()=>C.LocaleService.getLocaleValue("pagination.totalInfo.lastText")),o=e.computed(()=>({"pagination-message":!0,"text-truncate":!0,"d-flex":!0,"ml-auto":t.value==="right","flex-fill":t.value==="right"}));function s(){return e.createVNode("li",{class:o.value},[e.createVNode("div",{class:"text-truncate"},[e.createVNode("span",{class:"pg-message-text"},[p.value]),e.createVNode("b",{class:"pg-message-total"},[a.value]),e.createVNode("span",{class:"pg-message-text"},[r.value])])])}return{renderPageInfo:s}}function K(t,a,p,r,o){const s=e.ref(!1),n=e.computed(()=>C.LocaleService.getLocaleValue("pagination.show")),l=e.computed(()=>C.LocaleService.getLocaleValue("pagination.totalInfo.lastText")),c=e.computed(()=>({dropup:!0,"dropdown-right":!0,"pg-pagelist":!0,"pagelist-disabled":r.value===0,show:s.value})),i=e.computed(()=>({"dropdown-menu":!0,show:s.value})),d=g=>({"w-100":!0,"dropdown-item":!0,active:a.value===g});function u(g){s.value=!0}function b(g){s.value=!1}function h(g,m,w){const j=g*m-m+1;return Math.ceil(j/w)}function V(g,m){const w=t.value;t.value=h(t.value,a.value,m),w!==t.value&&o.emit("update:currentPage",t.value),a.value=m,s.value=!1,o.emit("update:pageSize",a.value),o.emit("changed",{pageIndex:t.value,pageSize:a.value}),o.emit("pageSizeChanged",{pageIndex:t.value,pageSize:a.value})}function y(){return e.createVNode("li",{class:"pagination-pagelist"},[e.createVNode("div",{class:c.value,onMouseenter:g=>u(),onMouseleave:g=>b()},[e.createVNode("div",{class:"pg-pagelist-info"},[e.createVNode("span",{class:"pagelist-text"},[n.value]),e.createVNode("b",{class:"cur-pagesize"},[a.value]),e.createVNode("span",{class:"pagelist-text"},[l.value]),e.createVNode("i",{class:"f-icon f-icon-dropdown"},null)]),e.createVNode("div",{class:i.value,style:"margin-bottom: -1px;"},[p.value.map(g=>e.createVNode("li",{class:d(g),onClick:m=>V(m,g)},[e.createVNode("span",null,[g])]))])])])}return{renderPageList:y}}function J(t,a,p,r,o){const s=i=>({"page-item":!0,current:a.value===i.value,ellipsis:i.label==="...",disabled:t.disabled}),n=i=>({"f-icon":!0,"f-icon-arrow-seek-left":i.value<a.value,"f-icon-arrow-seek-right":i.value>a.value});function l(i,d){a.value=d,o.emit("update:currentPage",a.value),o.emit("changed",{pageIndex:a.value,pageSize:r.value}),o.emit("pageIndexChanged",{pageIndex:a.value,pageSize:r.value})}function c(){return p.value.map(i=>e.createVNode("li",{class:s(i),key:i.value+""},[a.value!==i.value&&e.createVNode("a",{class:"page-link",tabindex:"0",onClick:d=>l(d,i.value)},[e.createVNode("span",{class:"page-link-label"},[i.label]),i.label==="..."&&e.createVNode("i",{class:n(i)},null)]),a.value===i.value&&e.createVNode("span",{class:"page-link"},[i.label])]))}return{renderPageNumbers:c}}function Q(t,a,p,r,o){const s=e.computed(()=>({"page-item":!0,disabled:a.value}));function n(d){t.value=1,o.emit("update:currentPage",t.value),o.emit("changed",{pageIndex:t.value,pageSize:r.value}),o.emit("pageIndexChanged",{pageIndex:t.value,pageSize:r.value})}function l(d){t.value=t.value>2?t.value-1:1,o.emit("update:currentPage",t.value),o.emit("changed",{pageIndex:t.value,pageSize:r.value}),o.emit("pageIndexChanged",{pageIndex:t.value,pageSize:r.value})}function c(){return e.createVNode("li",{class:s.value},[p.value&&e.createVNode("a",{tabindex:"0",class:"page-link",onClick:d=>n()},[e.createVNode("span",{class:"f-icon f-page-first"},null)]),a.value&&e.createVNode("span",{class:"page-link"},[e.createVNode("span",{class:"f-icon f-page-first"},null)])])}function i(){return e.createVNode("li",{class:s.value},[p.value&&e.createVNode("a",{tabindex:"0",class:"page-link",onClick:d=>l()},[e.createVNode("span",{class:"f-icon f-page-pre"},null)]),a.value&&e.createVNode("span",{class:"page-link"},[e.createVNode("span",{class:"f-icon f-page-pre"},null)])])}return{renderFirstPage:c,renderPreviousPage:i}}function U(t){const a=e.ref([]);function p(o,s,n,l){const c=Math.ceil(n/2);return o===n?l:o===1?o:n<l?l-c<s?l-n+o:c<s?s-c+o:o:o}function r(o,s,n,l){const c=[],i=Math.ceil(n/s),d=Math.ceil(l/2),u=o<=d,b=i-d<o,h=!u&&!b,V=l<i;let y=1;for(;y<=i&&y<=l;){const g=p(y,o,l,i),m=y===2&&(h||b),w=y===l-1&&(h||u),I=V&&(m||w)?"...":""+g;c.push({label:I,value:g}),y++}a.value=c}return{pages:a,updatePages:r}}const S=e.defineComponent({name:"FPagination",props:O,emits:["changed","pageIndexChanged","pageSizeChanged","update:currentPage","update:pageSize"],setup(t,a){const p=e.ref(!1),r=e.ref(""),o=e.ref(!1),s=e.ref(t.pageSize),n=e.ref(t.currentPage),l=e.ref(t.totalItems),{pages:c,updatePages:i}=U(),d={position:"relative"},u={position:"absolute",right:"0",zIndex:1,background:"rgba(250,250,252,.6)",width:"100%",height:"100%"},b=e.computed(()=>!l.value||n.value===1),h=e.computed(()=>t.pageList),V=e.computed(()=>Math.ceil(l.value/s.value)),y=e.computed(()=>!l.value||n.value===V.value),g=e.computed(()=>t.showGoButton),m=e.computed(()=>!!l.value&&n.value>1),w=e.computed(()=>!(o.value&&c.value.length<=1)),I=e.computed(()=>t.showPageInfo),j=e.computed(()=>t.showPageList),T=e.computed(()=>t.showPageNumbers),x=e.computed(()=>!0),{renderFirstPage:B,renderPreviousPage:N}=Q(n,b,m,s,a),{renderLastPage:k,renderNextPage:P}=H(n,y,V,s,a),{renderPageInfo:M}=_(r,l),{renderPageList:z}=K(n,s,h,l,a),{renderPageNumbers:G}=J(t,n,c,s,a),{renderGotoButton:$}=W(n,V,s,a);i(n.value,s.value,l.value,7),e.watch(()=>t.totalItems,v=>{l.value=v,i(n.value,s.value,l.value,7)}),e.watch(()=>t.currentPage,(v,L)=>{v!==L&&(n.value=v,i(n.value,s.value,l.value,7))}),e.watch(()=>t.pageSize,(v,L)=>{v!==L&&(s.value=v,i(n.value,s.value,l.value,7))}),e.watchEffect(()=>{if(!h.value||!h.value.length)return;const v=h.value.includes(s.value);s.value=v?s.value:h.value[0],v||a.emit("update:pageSize",s.value)})();const F=e.computed(()=>({"d-flex":!0,"flex-wrap":!0,"justify-content-end":!0,"w-100":!0,"ngx-pagination":!0,pagination:!0,responsive:p.value,"pager-viewmode-default":t.mode==="default","pager-viewmode-simple":t.mode==="simple"})),A=e.computed(()=>({position:"relative","justify-content":r.value==="center"?"center":"start"}));function E(){return e.createVNode(e.Fragment,null,[I.value&&M(),j.value&&z(),x.value&&B(),x.value&&N(),T.value&&G(),x.value&&P(),x.value&&k(),g.value&&$()])}function R(){return e.createVNode(e.Fragment,null,[e.createVNode("li",{class:"page-item d-flex flex-fill"},null),x.value&&B(),x.value&&N(),$(),e.createVNode("li",{class:"page-item page-separator",style:"margin-left: 10px"},[e.createVNode("span",{style:"font-size: 15px; font-weight: 200;"},[e.createTextVNode(" /")])]),e.createVNode("li",{class:"page-item page-total",style:"margin-left: 5px"},[e.createVNode("span",{style:"font-size: 16px; font-weight: 600;"},[e.createTextVNode(" "),V.value])]),x.value&&P(),x.value&&k()])}return()=>e.createVNode("div",{class:"pagination-container",style:d},[t.disabled&&e.createVNode("div",{style:u},null),w.value&&e.createVNode("ul",{role:"navigation",class:F.value,style:A.value},[t.mode==="default"?E():R()])])}}),le=e.defineComponent({name:"FPagination",props:O,emits:["pageIndexChanged","pageSizeChanged"],setup(t,a){const p=e.ref(!1),r=e.ref(t.mode),o=e.ref(""),s=e.ref(!1),n=e.ref(t.pageSize),l=e.ref(t.currentPage),c=e.ref(t.totalItems),i=e.ref(),d=e.inject("design-item-context"),u=Y.useDesignerComponent(i,d);e.onMounted(()=>{i.value.componentInstance=u}),a.expose(u.value);const{pages:b,updatePages:h}=U(),V=e.computed(()=>l.value===1),y=e.computed(()=>[20,50,100]),g=e.computed(()=>Math.ceil(c.value/n.value)),m=e.computed(()=>l.value===g.value),w=e.computed(()=>!0),I=e.computed(()=>l.value>1),j=e.computed(()=>!(s.value&&b.value.length<=1)),T=e.computed(()=>!0),x=e.computed(()=>!0),B=e.computed(()=>!0),N=e.computed(()=>!0),{renderFirstPage:k,renderPreviousPage:P}=Q(l,V,I,n,a),{renderLastPage:M,renderNextPage:z}=H(l,m,g,n,a),{renderPageInfo:G}=_(o,c),{renderPageList:$}=K(l,n,y,c,a),{renderPageNumbers:X}=J(t,l,b,n,a),{renderGotoButton:F}=W(l,g,n,a);h(l.value,n.value,c.value,7),e.watch([l,n],()=>{h(l.value,n.value,c.value,7)}),e.watch(l,()=>{a.emit("pageIndexChanged",l.value)}),e.watch(n,()=>{a.emit("pageSizeChanged",n.value)});const A=e.computed(()=>({"ngx-pagination":!0,pagination:!0,responsive:p.value,"pager-viewmode-default":r.value==="default","pager-viewmode-simple":r.value==="simple"})),E=e.computed(()=>({position:"relative","justify-content":o.value==="center"?"center":"start"}));function R(){return e.createVNode(e.Fragment,null,[T.value&&G(),x.value&&$(),N.value&&k(),N.value&&P(),B.value&&X(),N.value&&z(),N.value&&M(),w.value&&F()])}function v(){return e.createVNode(e.Fragment,null,[e.createVNode("li",{class:"page-item d-flex flex-fill"},null),N.value&&k(),N.value&&P(),F(),e.createVNode("li",{class:"page-item page-separator",style:"margin-left: 10px"},[e.createVNode("span",{style:"font-size: 15px; font-weight: 200;"},[e.createTextVNode(" /")])]),e.createVNode("li",{class:"page-item page-total",style:"margin-left: 5px"},[e.createVNode("span",{style:"font-size: 16px; font-weight: 600;"},[e.createTextVNode(" "),g.value])]),N.value&&z(),N.value&&M()])}return()=>e.createVNode("div",{ref:i,class:"pagination-container"},[j.value&&e.createVNode("ul",{role:"navigation",class:A.value,style:E.value},[r.value==="default"?R():v()])])}});S.register=(t,a,p)=>{t.pagination=S,a.pagination=q},S.registerDesigner=(t,a,p)=>{t.pagination=le,a.pagination=q};const oe=Z.withInstall(S);f.FPagination=S,f.default=oe,f.paginationProps=O,f.propsResolver=q,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});