https://closedvpn.io/assets/index-Cz0bFnvS.js

1import{a as c,j as o,aZ as z}from"./index-DZgiyEfX.js";import{D as A}from"./DemoLayout-BgygHRsw.js";import{B as S}from"./Button-BiazGNgx.js";import{D as w}from"./DataTable-BtH2c0IF.js";import{c as N}from"./CustomersService-t175e-aL.js";import{d as I}from"./debounce-Cf1dOWwK.js";import"./Affix-B01h3INP.js";import"./Card-C5ft4_IO.js";import"./Tooltip-BG8m3pvI.js";import"./index-nsqJCegG.js";import"./floating-ui.react-rGfnS0rr.js";import"./floating-ui.dom-BbtxUxwo.js";import"./index-BXrRIF9I.js";import"./useControllableState-D4o7m0Ek.js";import"./CodeBox-0o0bGCnq.js";import"./SyntaxHighlighter-JDXxqUqq.js";import"./toConsumableArray-B-bNg196.js";import"./extends-CF3RwP-h.js";import"./index-CIl1lNYU.js";import"./index-BTCd8CUR.js";import"./DemoComponentApi-ooo6srl9.js";import"./index-zwc5etUn.js";import"./index-BaReYDdr.js";import"./index-Chjiymov.js";import"./Pagination-DsWqgjOJ.js";import"./Select-D7iKmBzt.js";import"./ScrollBar-BMzJ_aw0.js";import"./throttle-Bx8W9olf.js";import"./debounce-DTvS9hcT.js";import"./isObject--vsEa_js.js";import"./isObjectLike-Bj69nFek.js";import"./isSymbol-8ASRihsl.js";import"./index-BFIarCM6.js";import"./cloneDeep-B9FZ8awu.js";import"./_baseAssignValue-BF5A_HIh.js";import"./isTypedArray-4anjUQKj.js";import"./isArray-DnKyzTIY.js";import"./_getPrototype-EC_E710j.js";import"./last-qTSvMfkb.js";import"./toString-Ca9MftBt.js";import"./TableRowSkeleton-DIIB7wVM.js";import"./Skeleton-7aOzdyBO.js";import"./index-CB8uyaAw.js";import"./ApiService-FauMm1xF.js";import"./AxiosBase-BspAYVhZ.js";import"./authStore-CUds_rv-.js";const P=()=>{const[g,u]=c.useState([]),[f,p]=c.useState(!1),[n,s]=c.useState({total:0,pageIndex:1,pageSize:10,query:"",sort:{order:"",key:""}}),d=c.useMemo(()=>[{header:"Name",accessorKey:"name"},{header:"Email",accessorKey:"email"},{header:"",id:"action",cell:l=>o.jsx(S,{size:"xs",onClick:()=>console.log("Action clicked",l),children:"Action"})}],[]),m=l=>{s(r=>({...r,pageIndex:l}))},b=l=>{s(r=>({...r,pageSize:l}))},y=({order:l,key:r})=>{s(h=>({...h,sort:{order:l,key:r}}))};return c.useEffect(()=>{(async()=>{p(!0);const r=await N(n);r&&(u(r.list),p(!1),s(h=>({...h,total:r.total})))})()},[n.pageIndex,n.sort,n.pageSize]),o.jsx(w,{columns:d,data:g,loading:f,pagingData:{total:n.total,pageIndex:n.pageIndex,pageSize:n.pageSize},onPaginationChange:m,onSelectChange:b,onSort:y})},v=()=>{const[g,u]=c.useState([]),[f,p]=c.useState(!1),[n,s]=c.useState([]),[d,m]=c.useState({total:0,pageIndex:1,pageSize:10,query:"",sort:{order:"",key:""}}),b=e=>{console.log("Action clicked",e)},y=()=>{console.log("selectedRows",n)},l=c.useMemo(()=>[{header:"Name",accessorKey:"name"},{header:"Email",accessorKey:"email"},{header:"",id:"action",cell:e=>o.jsx(S,{size:"xs",onClick:()=>b(e),children:"Action"})}],[]),r=e=>{m(t=>({...t,pageIndex:e}))},h=e=>{m(t=>({...t,pageSize:e}))},C=({order:e,key:t})=>{m(i=>({...i,sort:{order:e,key:t}}))},k=(e,t)=>{console.log("row",t),s(e?i=>i.includes(t.name)?i:[...i,t.name]:i=>i.includes(t.name)?i.filter(x=>x!==t.name):i)},a=(e,t)=>{if(console.log("rows",t),e){const i=t.map(D=>D.original),x=[];i.forEach(D=>{x.push(D.name)}),s(x)}else s([])};return c.useEffect(()=>{(async()=>{p(!0);const t=await N(d);t.list&&(u(t.list),p(!1),m(i=>({...i,total:t.total})))})()},[d.pageIndex,d.sort,d.pageSize]),o.jsxs(o.Fragment,{children:[n.length>0&&o.jsx("div",{className:"flex justify-end mb-4",children:o.jsx(S,{size:"sm",variant:"solid",onClick:y,children:"Batch Action"})}),o.jsx(w,{selectable:!0,columns:l,data:g,loading:f,pagingData:d,onPaginationChange:r,onSelectChange:h,onSort:C,onCheckBoxChange:k,onIndeterminateCheckBoxChange:a})]})},B=()=>{const[g,u]=c.useState([]),[f,p]=c.useState(!1),[n,s]=c.useState({total:0,pageIndex:1,pageSize:10,query:"",sort:{order:"",key:""}}),d=c.useRef(null),m=I(b,500);function b(a){typeof a=="string"&&(a.length>1||a.length===0)&&s(e=>({...e,query:a,pageIndex:1}))}const y=a=>{m(a.target.value)},l=a=>{console.log("Action clicked",a)},r=[{header:"Name",accessorKey:"name"},{header:"Email",accessorKey:"email"},{header:"",id:"action",cell:a=>o.jsx(S,{size:"xs",onClick:()=>l(a),children:"Action"})}],h=a=>{s(e=>({...e,pageIndex:a}))},C=a=>{s(e=>({...e,pageSize:a}))},k=({order:a,key:e})=>{console.log({order:a,key:e}),s(t=>({...t,sort:{order:a,key:e}}))};return c.useEffect(()=>{(async()=>{p(!0);const e=await N(n);e&&(u(e.list),p(!1),s(t=>({...t,total:e.total})))})()},[n.pageIndex,n.sort,n.pageSize,n.query]),o.jsxs(o.Fragment,{children:[o.jsx("div",{className:"flex justify-end mb-4",children:o.jsx(z,{ref:d,placeholder:"Search...",size:"sm",className:"lg:w-52",onChange:y})}),o.jsx(w,{columns:r,data:g,loading:f,pagingData:n,onPaginationChange:h,onSelectChange:C,onSort:k})]})},j="DataTableDoc",T={title:"DataTable",desc:'DataTable is often used table logic encapsulated component, it can save up 

1some boilerplate setup from <a class="text-primary underline" href="https://react-table-v7.tanstack.com/" target="_blank">react-table</a> & quick start with your async table data.'},E=[{mdName:"Basic",mdPath:j,title:"Basic",desc:"",component:o.jsx(P,{})},{mdName:"Checkable",mdPath:j,title:"Checkable",desc:"",component:o.jsx(v,{})},{mdName:"Query",mdPath:j,title:"Query",desc:"",component:o.jsx(B,{})}],R=[{component:"DataTable",api:[{propName:"columns",type:'<a class="text-primary underline" href="https://tanstack.com/table/v8/docs/guide/column-defs" target="_blank"><code>Array&lt;Column&gt;</code></a>',default:"<code>[]</code>",desc:"The core columns configuration object for the entire table"},{propName:"data",type:"<code>Array&lt;any&gt;</code>",default:"<code>[]</code>",desc:"The data array that you want to display on the table"},{propName:"loading",type:"<code>boolean</code>",default:"<code>false</code>",desc:"Wheter to display loading indicator on the table"},{propName:"onCheckBoxChange",type:"<code>(checked: boolean, row: any) => void</code>",default:"-",desc:"Callback when row checkbox is changed, return a checkbox value & changed row data"},{propName:"onIndeterminateCheckBoxChange",type:"<code>(checked: boolean, rows: any) => void</code>",default:"-",desc:"Callback when indeterminate checkbox is changed, return indeterminate checkbox value & all rows data"},{propName:"onPaginationChange",type:"<code>(pageIndex: number) => void</code>",default:"-",desc:"Callback when pagination changed"},{propName:"onSelectChange",type:"<code>(pageSize: number) => void</code>",default:"-",desc:"Callback when page size selector changed"},{propName:"onSort",type:"<code>(pageSize: {order: 'desc' | 'asc', key: string}) => void</code>",default:"-",desc:"Callback when any column of sorted changed, return sort order & sorted column identifier"},{propName:"pageSizes",type:"<code>number[]</code>",default:"<code>[10, 25, 50, 100]</code>",desc:"Options of selectable page sizes"},{propName:"skeletonAvatarColumns",type:"<code>number[]</code>",default:"-",desc:"Specify skeleton avatar display is which column when loading is true"},{propName:"skeletonAvatarProps",type:'<a class="text-primary underline" href="/ui-components/avatar#api" target="_blank"><code>AvatarProps</code></a>',default:"-",desc:"Props for skeleton avatar"},{propName:"pagingData",type:"<code>{total: number, pageIndex: number, pageSize: number}</code>",default:"<code>{total: 0, pageIndex: 1, pageSize: 10}</code>",desc:"Paging state of tthe table"}]}],Ae=()=>o.jsx(A,{innerFrame:!1,header:T,demos:E,api:R,mdPrefixPath:"shared"});export{Ae as default};