@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 15.5 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("../popover/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","../popover/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.FPopover,f.designerCanvas,f.common))})(this,function(f,e,G,k,U,Y,Z){"use strict";const ee=new Map([["appearance",G.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,d){return a}const B={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=G.createPropsResolver(B,te,ee,ne,ae);function D(t,a,d,c){e.computed(()=>k.LocaleService.getLocaleValue("pagination.goto.prefix"));const i=e.ref(""),o=e.ref(t.value);e.watch(t,s=>{o.value!==s&&(o.value=s)});function n(s){return!isNaN(s)&&s>=1&&s<=a.value}function l(s){const V=t.value;o.value=s.target.valueAsNumber,n(o.value)?(t.value=o.value,c.emit("update:currentPage",t.value),c.emit("changed",{pageIndex:t.value,pageSize:d.value}),c.emit("pageIndexChanged",{pageIndex:t.value,pageSize:d.value})):o.value=V}function u(s){s.key==="Enter"&&l(s)}function r(){return e.createVNode("li",{class:"page-goto-input d-flex flex-row",style:"padding-left: 10px; white-space: nowrap;"},[e.createVNode("input",{title:"page-index-spinner",type:"number",class:"form-control farris-gotopagenumber",value:o.value,min:1,max:a.value,style:"display: inline-block;margin-left:3px;",onBlur:s=>l(s),onKeyup:s=>u(s)},null),i.value])}return{renderGotoButton:r}}function W(t,a,d,c,i){const o=e.computed(()=>({"page-item":!0,disabled:a.value}));function n(s){t.value=t.value<d.value?t.value+1:d.value,i.emit("update:currentPage",t.value),i.emit("changed",{pageIndex:t.value,pageSize:c.value}),i.emit("pageIndexChanged",{pageIndex:t.value,pageSize:c.value})}function l(s){t.value=d.value,i.emit("update:currentPage",t.value),i.emit("changed",{pageIndex:t.value,pageSize:c.value}),i.emit("pageIndexChanged",{pageIndex:t.value,pageSize:c.value})}function u(){return e.createVNode("li",{class:o.value},[!a.value&&e.createVNode("a",{class:"page-link",tabindex:"0",onClick:s=>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 r(){return e.createVNode("li",{class:o.value},[!a.value&&e.createVNode("a",{class:"page-link",tabindex:"0",onClick:s=>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:r,renderNextPage:u}}function H(t,a){const d=e.computed(()=>k.LocaleService.getLocaleValue("pagination.totalInfo.firstText")),c=e.computed(()=>k.LocaleService.getLocaleValue("pagination.totalInfo.lastText")),i=e.computed(()=>({"pagination-message":!0,"text-truncate":!0,"d-flex":!0,"ml-auto":t.value==="right","flex-fill":t.value==="right"}));function o(){return e.createVNode("li",{class:i.value},[e.createVNode("div",{class:"text-truncate"},[e.createVNode("span",{class:"pg-message-text"},[d.value]),e.createVNode("b",{class:"pg-message-total"},[a.value]),e.createVNode("span",{class:"pg-message-text"},[c.value])])])}return{renderPageInfo:o}}function _(t,a,d,c,i){const o=e.ref(!1),n=e.ref(),l=e.ref(),u=e.computed(()=>k.LocaleService.getLocaleValue("pagination.show")),r=e.computed(()=>k.LocaleService.getLocaleValue("pagination.totalInfo.lastText")),s=e.computed(()=>({dropup:!0,"dropdown-right":!0,"pg-pagelist":!0,"pagelist-disabled":c.value===0,show:o.value})),V=g=>({"w-100":!0,"dropdown-item":!0,active:a.value===g});let p=null;function v(g){p&&(clearTimeout(p),p=null),o.value=!0,e.nextTick(()=>{n.value&&l.value&&n.value.show(l.value)})}function w(g){p=setTimeout(()=>{o.value=!1,n.value&&n.value.hide(),p=null},200)}function b(){p&&(clearTimeout(p),p=null)}function x(){p=setTimeout(()=>{o.value=!1,n.value&&n.value.hide(),p=null},200)}function I(g,y,m){const h=g*y-y+1;return Math.ceil(h/m)}function C(g,y){const m=t.value;t.value=I(t.value,a.value,y),m!==t.value&&i.emit("update:currentPage",t.value),a.value=y,o.value=!1,n.value&&n.value.hide(),i.emit("update:pageSize",a.value),i.emit("changed",{pageIndex:t.value,pageSize:a.value}),i.emit("pageSizeChanged",{pageIndex:t.value,pageSize:a.value})}function S(){return e.createVNode("li",{class:"pagination-pagelist"},[e.createVNode("div",{class:s.value,onMouseenter:g=>v(),onMouseleave:g=>w()},[e.createVNode("div",{ref:l,class:"pg-pagelist-info"},[e.createVNode("span",{class:"pagelist-text"},[u.value]),e.createVNode("b",{class:"cur-pagesize"},[a.value]),e.createVNode("span",{class:"pagelist-text"},[r.value]),e.createVNode("i",{class:"f-icon f-icon-dropdown"},null)]),e.createVNode(U,{ref:n,host:"body",placement:"top-left",visible:o.value,fitContent:!0,keepWidthWithReference:!0,showArrow:!1},{default:()=>[e.createVNode("div",{class:"pg-pagelist-dropdown",onMouseenter:()=>b(),onMouseleave:()=>x()},[d.value.map(g=>e.createVNode("li",{class:V(g),onClick:y=>C(y,g)},[e.createVNode("span",null,[g])]))])]})])])}return{renderPageList:S}}function K(t,a,d,c,i){const o=r=>({"page-item":!0,current:a.value===r.value,ellipsis:r.label==="...",disabled:t.disabled}),n=r=>({"f-icon":!0,"f-icon-arrow-seek-left":r.value<a.value,"f-icon-arrow-seek-right":r.value>a.value});function l(r,s){a.value=s,i.emit("update:currentPage",a.value),i.emit("changed",{pageIndex:a.value,pageSize:c.value}),i.emit("pageIndexChanged",{pageIndex:a.value,pageSize:c.value})}function u(){return d.value.map(r=>e.createVNode("li",{class:o(r),key:r.value+""},[a.value!==r.value&&e.createVNode("a",{class:"page-link",tabindex:"0",onClick:s=>l(s,r.value)},[e.createVNode("span",{class:"page-link-label"},[r.label]),r.label==="..."&&e.createVNode("i",{class:n(r)},null)]),a.value===r.value&&e.createVNode("span",{class:"page-link"},[r.label])]))}return{renderPageNumbers:u}}function X(t,a,d,c,i){const o=e.computed(()=>({"page-item":!0,disabled:a.value}));function n(s){t.value=1,i.emit("update:currentPage",t.value),i.emit("changed",{pageIndex:t.value,pageSize:c.value}),i.emit("pageIndexChanged",{pageIndex:t.value,pageSize:c.value})}function l(s){t.value=t.value>2?t.value-1:1,i.emit("update:currentPage",t.value),i.emit("changed",{pageIndex:t.value,pageSize:c.value}),i.emit("pageIndexChanged",{pageIndex:t.value,pageSize:c.value})}function u(){return e.createVNode("li",{class:o.value},[d.value&&e.createVNode("a",{tabindex:"0",class:"page-link",onClick:s=>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 r(){return e.createVNode("li",{class:o.value},[d.value&&e.createVNode("a",{tabindex:"0",class:"page-link",onClick:s=>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:u,renderPreviousPage:r}}function J(t){const a=e.ref([]);function d(i,o,n,l){const u=Math.ceil(n/2);return i===n?l:i===1?i:n<l?l-u<o?l-n+i:u<o?o-u+i:i:i}function c(i,o,n,l){const u=[],r=Math.ceil(n/o),s=Math.ceil(l/2),V=i<=s,p=r-s<i,v=!V&&!p,w=l<r;let b=1;for(;b<=r&&b<=l;){const x=d(b,i,l,r),I=b===2&&(v||p),C=b===l-1&&(v||V),S=w&&(I||C)?"...":""+x;u.push({label:S,value:x}),b++}a.value=u}return{pages:a,updatePages:c}}const L=e.defineComponent({name:"FPagination",props:B,emits:["changed","pageIndexChanged","pageSizeChanged","update:currentPage","update:pageSize"],setup(t,a){const d=e.ref(!1),c=e.ref(""),i=e.ref(!1),o=e.ref(t.pageSize),n=e.ref(t.currentPage),l=e.ref(t.totalItems),{pages:u,updatePages:r}=J(),s={position:"relative",overflowX:"auto"},V={position:"absolute",right:"0",zIndex:1,background:"rgba(250,250,252,.6)",width:"100%",height:"100%"},p=e.computed(()=>!l.value||n.value===1),v=e.computed(()=>typeof t.pageList=="string"?t.pageList.split(","):t.pageList),w=e.computed(()=>Math.ceil(l.value/o.value)),b=e.computed(()=>!l.value||n.value===w.value),x=e.computed(()=>t.showGoButton),I=e.computed(()=>!!l.value&&n.value>1),C=e.computed(()=>!(i.value&&u.value.length<=1)),S=e.computed(()=>t.showPageInfo),g=e.computed(()=>t.showPageList),y=e.computed(()=>t.showPageNumbers),m=e.computed(()=>!0),{renderFirstPage:P,renderPreviousPage:h}=X(n,p,I,o,a),{renderLastPage:j,renderNextPage:T}=W(n,b,w,o,a),{renderPageInfo:O}=H(c,l),{renderPageList:z}=_(n,o,v,l,a),{renderPageNumbers:R}=K(t,n,u,o,a),{renderGotoButton:F}=D(n,w,o,a);r(n.value,o.value,l.value,7),e.watch(()=>t.totalItems,N=>{l.value=N,r(n.value,o.value,l.value,7)}),e.watch(()=>t.currentPage,(N,M)=>{N!==M&&(n.value=N,r(n.value,o.value,l.value,7))}),e.watch(()=>t.pageSize,(N,M)=>{N!==M&&(o.value=N,r(n.value,o.value,l.value,7))}),e.watchEffect(()=>{if(!v.value||!v.value.length)return;const N=v.value.includes(o.value);o.value=N?o.value:v.value[0],N||a.emit("update:pageSize",o.value)})();const $=e.computed(()=>({"ml-auto":c.value!=="center","mx-auto":c.value==="center","ngx-pagination":!0,pagination:!0,responsive:d.value,"pager-viewmode-default":t.mode==="default","pager-viewmode-simple":t.mode==="simple","position-relative":!0}));function A(){return e.createVNode(e.Fragment,null,[S.value&&O(),g.value&&z(),m.value&&P(),m.value&&h(),y.value&&R(),m.value&&T(),m.value&&j(),x.value&&F()])}function E(){return e.createVNode(e.Fragment,null,[e.createVNode("li",{class:"page-item d-flex flex-fill"},null),m.value&&P(),m.value&&h(),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(" "),w.value])]),m.value&&T(),m.value&&j()])}return()=>e.createVNode("div",{class:"pagination-container d-flex",style:s},[t.disabled&&e.createVNode("div",{style:V},null),C.value&&e.createVNode("ul",{role:"navigation",class:$.value},[t.mode==="default"?A():E()])])}}),le=e.defineComponent({name:"FPagination",props:B,emits:["pageIndexChanged","pageSizeChanged"],setup(t,a){const d=e.ref(!1),c=e.ref(t.mode),i=e.ref(""),o=e.ref(!1),n=e.ref(t.pageSize),l=e.ref(t.currentPage),u=e.ref(t.totalItems),r=e.ref(),s=e.inject("design-item-context"),V=Y.useDesignerComponent(r,s);e.onMounted(()=>{r.value.componentInstance=V}),a.expose(V.value);const{pages:p,updatePages:v}=J(),w=e.computed(()=>l.value===1),b=e.computed(()=>[20,50,100]),x=e.computed(()=>Math.ceil(u.value/n.value)),I=e.computed(()=>l.value===x.value),C=e.computed(()=>!0),S=e.computed(()=>l.value>1),g=e.computed(()=>!(o.value&&p.value.length<=1)),y=e.computed(()=>!0),m=e.computed(()=>!0),P=e.computed(()=>!0),h=e.computed(()=>!0),{renderFirstPage:j,renderPreviousPage:T}=X(l,w,S,n,a),{renderLastPage:O,renderNextPage:z}=W(l,I,x,n,a),{renderPageInfo:R}=H(i,u),{renderPageList:F}=_(l,n,b,u,a),{renderPageNumbers:Q}=K(t,l,p,n,a),{renderGotoButton:$}=D(l,x,n,a);v(l.value,n.value,u.value,7),e.watch([l,n],()=>{v(l.value,n.value,u.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:d.value,"pager-viewmode-default":c.value==="default","pager-viewmode-simple":c.value==="simple"})),E=e.computed(()=>({position:"relative","justify-content":i.value==="center"?"center":"start"}));function N(){return e.createVNode(e.Fragment,null,[y.value&&R(),m.value&&F(),h.value&&j(),h.value&&T(),P.value&&Q(),h.value&&z(),h.value&&O(),C.value&&$()])}function M(){return e.createVNode(e.Fragment,null,[e.createVNode("li",{class:"page-item d-flex flex-fill"},null),h.value&&j(),h.value&&T(),$(),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(" "),x.value])]),h.value&&z(),h.value&&O()])}return()=>e.createVNode("div",{ref:r,class:"pagination-container"},[g.value&&e.createVNode("ul",{role:"navigation",class:A.value,style:E.value},[c.value==="default"?N():M()])])}});L.register=(t,a,d)=>{t.pagination=L,a.pagination=q},L.registerDesigner=(t,a,d)=>{t.pagination=le,a.pagination=q};const oe=Z.withInstall(L);f.FPagination=L,f.default=oe,f.paginationProps=B,f.propsResolver=q,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});