UNPKG

@cpany/app

Version:
2 lines (1 loc) 9.34 kB
import{m as E,o as u,c as m,a as b,y as T,i as e,z as h,G as Ce,d as q,D as J,W as c,g as j,h as P,w,j as Q,R as D,P as $,Q as F,t as z,k as I,_ as _e,r as we,F as ke,N as B}from"./index-DQ3P2Jm7.js";const Pe={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},xe=b("path",{fill:"currentColor",d:"M11 4h2v12l5.5-5.5l1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5L11 16z"},null,-1),Se=[xe];function $e(t,l){return u(),m("svg",Pe,Se)}const Le=E({name:"mdi-arrow-down",render:$e}),Me={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},ze=b("path",{fill:"currentColor",d:"M13 20h-2V8l-5.5 5.5l-1.42-1.42L12 4.16l7.92 7.92l-1.42 1.42L13 8z"},null,-1),je=[ze];function Ne(t,l){return u(),m("svg",Me,je)}const Be=E({name:"mdi-arrow-up",render:Ne});function De(t){const l=T(window.innerWidth),f=T(l.value<=e(t)),g=()=>{l.value=window.innerWidth,f.value=l.value<=e(t)},s=()=>window.removeEventListener("resize",g);return window.addEventListener("resize",g,{passive:!0}),{width:l,isMobile:f,clean:s}}const ie=new Map;function Ve(t,l,f){const g=h(()=>e(l).length),s=h(()=>Math.max(1,e(t)??g.value)),i=h(()=>Math.ceil(g.value/s.value)),o=T(f?ie.get(f)??0:0),p=h(()=>o.value*s.value),C=h(()=>Math.min(g.value,p.value+s.value));Ce(o,V=>{f&&ie.set(f,V)});const L=h(()=>o.value+1<i.value&&C.value<g.value),_=()=>{L.value&&(o.value+=1)},d=h(()=>o.value>0&&p.value>0);return{current:o,pageLength:i,L:p,R:C,hasNextPage:L,nextPage:_,hasPrePage:d,prePage:()=>{d.value&&(o.value-=1)},goPage:V=>{const A=e(V);0<=A&&A<i.value&&(o.value=A)}}}const Ae=q({name:"CTableColumn",props:{label:String,width:{type:[Number,String]},align:String,center:{type:Boolean,default:!1},sort:Function,mobileHeaderClass:{type:Array,default:[]}},setup(t,{slots:l}){const{align:f,center:g}=J(t),s=["px-3","py-2",f.value==="center"||g.value?"text-center":f.value==="right"?"text-right":"text-left"];return()=>c("td",{class:s},l.default&&l.default(t))}}),Re={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},Te=b("path",{fill:"currentColor",d:"M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z"},null,-1),Fe=[Te];function Ie(t,l){return u(),m("svg",Re,Fe)}const ue=E({name:"mdi-chevron-left",render:Ie}),Ee={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},He=b("path",{fill:"currentColor",d:"M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"},null,-1),Oe=[He];function We(t,l){return u(),m("svg",Ee,Oe)}const de=E({name:"mdi-chevron-right",render:We}),Ue={key:0,class:"mb-2 grid grid-cols-2 gap-2"},Ge={class:"flex justify-center"},Qe=b("span",{class:"select-none ml-2 inline-flex justify-center items-center py-2 md:px-2"},"...",-1),qe=b("span",{class:"select-none ml-2 inline-flex justify-center items-center py-2 md:px-2"},"...",-1),Je=b("span",{class:"select-none ml-2 inline-flex justify-center items-center py-2 md:px-2"},"...",-1),Ke=b("span",{class:"select-none ml-2 inline-flex justify-center items-center py-2 md:px-2"},"...",-1),Xe=q({__name:"c-table-page",props:{isMobile:{type:Boolean},pageView:null,current:null,first:null,last:null,pageSize:null,nextPage:null,prePage:null,goPage:null},setup(t){const l=t,{isMobile:f,pageView:g,current:s,first:i,last:o}=J(l),p=h(()=>(g==null?void 0:g.value)??5),C=h(()=>(f==null?void 0:f.value)??!1);return(L,_)=>{const d=j("c-button");return u(),m($,null,[e(C)?(u(),m("div",Ue,[P(d,{padding:"p-2",onClick:t.prePage,disable:e(s)<=e(i)},{default:w(()=>[P(e(ue))]),_:1},8,["onClick","disable"]),P(d,{padding:"p-2",onClick:t.nextPage,disable:e(s)+1>=e(o)},{default:w(()=>[P(e(de))]),_:1},8,["onClick","disable"])])):Q("",!0),b("div",Ge,[e(C)?Q("",!0):(u(),D(d,{key:0,padding:"p-2",onClick:t.prePage,disable:e(s)<=e(i)},{default:w(()=>[P(e(ue))]),_:1},8,["onClick","disable"])),e(o)-e(i)<=e(p)?(u(!0),m($,{key:1},F(e(o)-e(i),n=>(u(),D(d,{key:n,class:"ml-2",info:n+e(i)===e(s)+1,onClick:N=>t.goPage(n+e(i)-1)},{default:w(()=>[b("span",null,z(n+e(i)),1)]),_:2},1032,["info","onClick"]))),128)):e(s)-e(i)<e(p)?(u(),m($,{key:2},[(u(!0),m($,null,F(e(p),n=>(u(),D(d,{key:n,class:"ml-2",info:n+e(i)===e(s)+1,onClick:N=>t.goPage(n+e(i)-1)},{default:w(()=>[b("span",null,z(n+e(i)),1)]),_:2},1032,["info","onClick"]))),128)),Qe,P(d,{class:"ml-2",onClick:_[0]||(_[0]=n=>t.goPage(e(o)-1))},{default:w(()=>[I(z(e(o)),1)]),_:1})],64)):e(o)-e(s)<=e(p)?(u(),m($,{key:3},[P(d,{class:"ml-2",onClick:_[1]||(_[1]=n=>t.goPage(e(i)))},{default:w(()=>[I(z(e(i)+1),1)]),_:1}),qe,(u(!0),m($,null,F(e(p),n=>(u(),D(d,{key:n,class:"ml-2",info:e(o)-e(p)+n===e(s)+1,onClick:N=>t.goPage(e(o)-e(p)+n-1)},{default:w(()=>[b("span",null,z(e(o)-e(p)+n),1)]),_:2},1032,["info","onClick"]))),128))],64)):(u(),m($,{key:4},[P(d,{class:"ml-2",onClick:_[2]||(_[2]=n=>t.goPage(e(i)))},{default:w(()=>[I(z(e(i)+1),1)]),_:1}),Je,(u(!0),m($,null,F(e(p),n=>(u(),D(d,{key:n,class:"ml-2",info:e(s)-Math.floor(e(p)/2)+n===e(s)+1,onClick:N=>t.goPage(e(s)-Math.floor(e(p)/2)+n-1)},{default:w(()=>[b("span",null,z(e(s)-Math.floor(e(p)/2)+n),1)]),_:2},1032,["info","onClick"]))),128)),Ke,P(d,{class:"ml-2",onClick:_[3]||(_[3]=n=>t.goPage(e(o)-1))},{default:w(()=>[I(z(e(o)),1)]),_:1})],64)),e(C)?Q("",!0):(u(),D(d,{key:5,padding:"p-2",class:"ml-2",onClick:t.nextPage,disable:e(s)+1>=e(o)},{default:w(()=>[P(e(de))]),_:1},8,["onClick","disable"]))])],64)}}}),Ye={},Ze={class:"select relative"},et={class:"pl-2 pr-8 py-2 cursor-pointer block w-full outline-none rounded border border-1 border-[#dbdbdb] appearance-none"};function tt(t,l){return u(),m("div",Ze,[b("select",et,[we(t.$slots,"default")])])}const nt=_e(Ye,[["render",tt]]),fe=new Map,at=q({name:"CTable",components:{IconDown:Le,IconUp:Be,CTablePage:Xe,CSelect:nt},props:{cache:{type:String},data:{type:Array,default:[]},mobile:{type:Number,default:768},defaultSort:{type:String},defaultSortOrder:{type:String,default:"asc"},pageSize:{type:Number},mobilePageSize:{type:Number}},setup(t,{slots:l}){const{data:f,defaultSort:g,defaultSortOrder:s,mobile:i,pageSize:o,mobilePageSize:p}=J(t),C=h(()=>f.value.length===0),{isMobile:L,clean:_}=De(i);ke(()=>_());const d=h(()=>L.value?p.value??o.value:o.value),n=t.cache?fe.get(t.cache):void 0,N=h(()=>B(d.value)),{current:V,pageLength:A,L:H,R:pe,nextPage:ve,prePage:ge,goPage:me}=Ve(d,f,t.cache),R=T((n==null?void 0:n.field)??g.value),M=T((n==null?void 0:n.order)??s.value),O=()=>{t.cache&&fe.set(t.cache,{field:R.value,order:M.value})};O();const K=x=>{R.value=x,M.value=s.value,O()},X=()=>{M.value==="desc"?M.value="asc":M.value="desc",O()},W=x=>{if(!x)return[];const k=[];for(const a of x)if(a.type===$&&Array.isArray(a.children))for(const r of a.children)r!==null&&typeof r=="object"&&!Array.isArray(r)&&k.push(r);else k.push(a);return k.filter(a=>a.type===Ae)},U=W(l.columns?l.columns({}):[]),he=h(()=>(k=>{var a,r;if(B(R.value)){for(const v of U)if((((a=v.props)==null?void 0:a.label)??"")===R.value){const S=k.sort((r=v.props)==null?void 0:r.sort);return M.value==="desc"?S.reverse():S}return k}else return k})(f.value)),Y=h(()=>he.value.slice(H.value,pe.value)),Z=()=>c(j("c-table-page"),{current:V.value,first:0,last:A.value,pageSize:d.value,nextPage:ve,prePage:ge,goPage:me,pageView:L.value?3:5,isMobile:L.value}),be=()=>{const x=()=>U.map(a=>{var ee,te,ne,le,ae,se,oe,re;const r=B((ee=a.props)==null?void 0:ee.sort),v=r&&(((te=a.props)==null?void 0:te.label)??"")===R.value,y={width:(ne=a.props)==null?void 0:ne.width,borderWidth:"0 0 2px 0"},S=((le=a.props)==null?void 0:le.align)==="center"||B((ae=a.props)==null?void 0:ae.center)&&((se=a.props)==null?void 0:se.center)!==!1?"justify-center":((oe=a.props)==null?void 0:oe.align)==="right"?"justify-end":"justify-start";return c("th",{style:y,class:["select-none","font-600","px-3","py-2","border-solid",v?"border-[#7a7a7a]":"border-[#dbdbdb]",r?"cursor-pointer":null,r?"hover:border-[#7a7a7a]":null]},c("div",{class:["flex","items-center",S],onClick:r?()=>{var ce;v?X():K(((ce=a.props)==null?void 0:ce.label)??"")}:void 0},[r?c(M.value==="desc"?j("icon-down"):j("icon-up"),{class:[!v&&"hidden"]}):"",c("span",{},(re=a.props)==null?void 0:re.label)]))}),k=a=>a.map((r,v)=>c("tr",{},l.columns&&W(l.columns({row:r,index:v+H.value}))));return c("div",{},[c("table",{class:["table","w-full","border-separate","table-auto","rounded"]},[c("thead",{},c("tr",{},x())),c("tbody",{},k(Y.value))]),!C.value&&N.value&&Z(),C.value&&l.empty&&l.empty({})])},ye=()=>{const x=()=>{const a=U.map(r=>{var v,y;if(B((v=r.props)==null?void 0:v.sort)){const S=((y=r.props)==null?void 0:y.label)??"";return c("option",{value:S},[S])}else return null}).filter(r=>B(r));return a.length>0&&c("div",{class:["my-4","flex","justify-between"]},[c(j("c-select"),{class:["w-full","mr-2"],onChange(r){var y;const v=(y=r.target)==null?void 0:y.value;B(v)&&K(v)}},a),c(j("c-button"),{info:!0,onClick:X},[M.value==="desc"?c(j("icon-down"),{}):c(j("icon-up"),{})])])},k=()=>Y.value.map((a,r)=>{const v=W(l.columns&&l.columns({row:a,index:r+H.value,mobile:!0}));return c("div",{class:["box","p-0","my-4"]},v.map(y=>{var G;const S=(y.props&&y.props["mobile-header-class"])??[];return c("div",{class:["pl-3","border","flex","flex-shrink","justify-between","justify-items-stretch"]},[c("div",{class:["py-2","font-600","text-left","flex","items-center",...S]},(G=y.props)==null?void 0:G.label),c(y,{class:["block"]})])}))});return c("div",{class:["mobile-table"]},[!C.value&&x(),k(),!C.value&&N.value&&Z(),C.value&&l.empty&&l.empty({})])};return()=>L.value?ye():be()}});export{Ae as C,at as a};