mantine-datatable-extended 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +1 -1
- package/dist/styles.css +34 -0
- package/dist/styles.layer.css +3 -1
- package/package.json +12 -15
- package/dist/index.css +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {Popover,Button,TextInput,Divider,ScrollArea,Stack,Checkbox,Group,Text,NativeSelect,Space,Pagination,CloseButton,Badge,Indicator,NumberInput,RangeSlider,ActionIcon,Select}from'@mantine/core';import {IconAdjustmentsHorizontal,IconSearch,IconX,IconArrowsSort,IconPlus,IconRefresh,IconFilter,IconTrash,IconGripHorizontal}from'@tabler/icons-react';import {createContext,useContext,useState,useMemo,useEffect}from'react';import {jsx,jsxs}from'react/jsx-runtime';import {DataTable}from'mantine-datatable';import {useQueryState,parseAsInteger,parseAsJson}from'nuqs';import we,{z}from'zod';import {DatePicker}from'@mantine/dates';import L from'dayjs';import {DragDropProvider}from'@dnd-kit/react';import {isSortable,useSortable}from'@dnd-kit/react/sortable';var B={view:{columnsToggle:"Columns Toggle",columnsToggleSearchPlaceholder:"Search columns\u2026"},sort:{sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"},search:{search:"Search",searchAccessorsSearchPlaceholder:"Search columns\u2026"},filter:{resetFilter:"Reset Filters"},pagination:{rowsPerPage:"Rows per page",pageOfTotalPages:["Page","of"],startEndRecordOfTotalRecords:["","-","/"]}};var Te=createContext(void 0);function b(){let o=useContext(Te);if(!o)throw new Error("useDteContext must be used within a DteProvider");return o}function $e({children:o,urlKeys:e,defaultParams:l,storeColumnsKey:i,columns:a,originalUseDataTableColumnsResult:s,i18n:r}){if(!i)throw new Error("storeColumnsKey property is required");if(!a)throw new Error("columns property is required");let[m,p]=useState(0),[u,t]=useState([10,20,30,40,50]),c=useMemo(()=>({totalRecords:m,recordsPerPageOptions:u}),[m,u]),h=useMemo(()=>({view:{...B.view,...r?.view},sort:{...B.sort,...r?.sort},search:{...B.search,...r?.search},filter:{...B.filter,...r?.filter},pagination:{...B.pagination,...r?.pagination}}),[r]),g=useMemo(()=>({urlKeys:e,defaultParams:l,storeColumnsKey:i,columns:a,originalUseDataTableColumnsResult:s,paginationProps:c,setTotalRecords:p,setRecordsPerPageOptions:t,i18n:h}),[e,l,i,a,s,c,h]);return jsx(Te.Provider,{value:{...g},children:o})}function st(){let{originalUseDataTableColumnsResult:o,i18n:e}=b(),{effectiveColumns:l,columnsToggle:i,setColumnsToggle:a}=o,[s,r]=useState(""),m=useMemo(()=>i.filter(t=>t.toggleable),[i]),p=useMemo(()=>{if(!s.trim())return m;let t=s.toLowerCase().trim();return m.filter(c=>(l.find(g=>g.accessor===c.accessor)?.title?.toString()??"").toLowerCase().includes(t))},[m,l,s]),u=t=>{a(i.map(c=>c.accessor===t.accessor?{...c,toggled:!c.toggled}:c));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconAdjustmentsHorizontal,{size:16}),variant:"default",children:e.view.columnsToggle})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:t=>r(t.target.value),p:"4",placeholder:e.view.columnsToggleSearchPlaceholder,styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(t=>jsx(Checkbox,{checked:t.toggled,classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:l.find(c=>c.accessor===t.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>u(t),size:"xs",variant:"outline"},t.accessor))})})]})]})}function it(o){let{storeColumnsKey:e,originalUseDataTableColumnsResult:l}=b(),{effectiveColumns:i}=l,a={...o,columns:i,storeColumnsKey:e};return jsx(DataTable,{...a})}var N={ASC:"asc",DESC:"desc"},F={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var ve=z.object({accessor:z.string(),direction:z.enum(N)}),be=z.object({accessors:z.array(z.string()),value:z.string()}),Pe=z.object({variant:z.enum(F),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});function D(){let o={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},e={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},{urlKeys:l,defaultParams:i}=b();l&&(o=l),i&&(e={...e,...i});let[a,s]=useQueryState(o.page,parseAsInteger.withDefault(e.page)),[r,m]=useQueryState(o.pageSize,parseAsInteger.withDefault(e.pageSize)),[p,u]=useQueryState(o.sorts,parseAsJson(we.array(ve)).withDefault(e.sorts)),[t,c]=useQueryState(o.search,parseAsJson(be).withDefault(e.search)),[h,g]=useQueryState(o.filters,parseAsJson(we.array(Pe)).withDefault(e.filters)),f=()=>{s(e.page);},n=()=>{m(e.pageSize);},d=()=>{u(e.sorts);},P=()=>{c(e.search);},T=()=>{g(e.filters);};return {page:a,setPage:s,pageSize:r,setPageSize:m,sorts:p,setSorts:u,search:t,setSearch:c,filters:h,setFilters:g,resetPage:f,resetPageSize:n,resetSorts:d,resetSearch:P,resetFilters:T,resetAll:()=>{f(),n(),d(),P(),T();}}}function Fe({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(c=>c.accessor===e),r=s?.value?1:0,[m,p]=useState(s?L(Number.parseInt(s.value,10)).toISOString():null),u=c=>{if(p(c),c){let h=L(c).valueOf().toString();a(s?i.map(g=>g.accessor===e?{...g,value:h}:g):[...i,{variant:l,accessor:e,value:h}]);}},t=()=>{p(null),a(i.filter(c=>c.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:t,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{defaultDate:m?new Date(m):void 0,onChange:u,value:m})})]})}function Re({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(h=>h.accessor===e),r=s?.value.length??0,[m,p]=useState(s?.value[0]&&s?.value[1]?[L(Number.parseInt(s.value[0],10)).toISOString(),L(Number.parseInt(s.value[1],10)).toISOString()]:[null,null]),u=([h,g])=>{if(p([h,g]),h&&g){let[f,n]=[L(h).valueOf().toString(),L(g).valueOf().toString()];a(s?i.map(d=>d.accessor===e?{...d,value:[f,n]}:d):[...i,{variant:l,accessor:e,value:[f,n]}]);}},t=()=>{p([null,null]),a(i.filter(h=>h.accessor!==e));},c=m[1]&&m[0];return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:t,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,defaultDate:c?new Date(c):void 0,onChange:u,type:"range",value:m})})]})}function Ee({column:o}){let e=o.accessor,l=o.extend?.filterVariant,a=(o.extend?.filterOptions).data,[s,r]=useState(""),m=useMemo(()=>{if(!s.trim())return a;let n=s.toLowerCase().trim();return a.filter(d=>d.label.toLowerCase().includes(n))},[a,s]),{filters:p,setFilters:u}=D(),t=p.find(n=>n.accessor===e),c=t?.value.length??0,h=n=>{let d=t?.value??[],P=d.includes(n)?d.filter(T=>T!==n):[...d,n];if(P.length===0)u(p.filter(T=>T.accessor!==e));else {let T=p.some(S=>S.accessor===e);u(T?p.map(S=>S.accessor===e?{...S,value:P}:S):[...p,{variant:l,accessor:e,value:P}]);}},g=n=>p.some(d=>d.accessor===e&&d.value.includes(n)),f=()=>{u(p.filter(n=>n.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:f,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:n=>r(n.target.value),p:"4",styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:m.map(n=>jsx(Checkbox,{checked:g(n.value),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:n.label,labelPosition:"left",onChange:()=>h(n.value),size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${e}-${n.value}`))})})]})]})}function ze({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(t=>t.accessor===e),r=s?.value.length??0,m=t=>{a(s?i.map(c=>c.accessor===e?{...c,value:t.toString()}:c):[...i,{variant:l,accessor:e,value:t.toString()}]);},p=t=>{let c=t;typeof t=="string"&&(c=Number.parseInt(t,10)),m(c);},u=()=>{a(i.filter(t=>t.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:u,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(NumberInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:t=>p(t),p:"4",value:s?.value?Number.parseInt(s.value,10):void 0,variant:"unstyled"})})]})}function Oe({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{min:i,max:a,step:s=1,minRange:r=1,suffix:m}=o.extend?.filterOptions,{filters:p,setFilters:u}=D(),t=p.find(T=>T.accessor===e),c=t?.value.length??0,h=T=>{let[S,k]=[T[0].toString(),T[1].toString()];u(t?p.map(X=>X.accessor===e?{...X,value:[S,k]}:X):[...p,{variant:l,accessor:e,value:[S,k]}]);},g=t?.value[0]&&t?.value[1]?[Number.parseInt(t.value[0],10),Number.parseInt(t.value[1],10)]:[i,a],f=([T,S])=>{h([T,S]);},n=T=>{let S=typeof T=="string"?Number.parseInt(T,10)||i:T,k=Math.min(Math.max(S,i),g[1]);h([k,g[1]]);},d=T=>{let S=typeof T=="string"?Number.parseInt(T,10)||a:T,k=Math.max(Math.min(S,a),g[0]);h([g[0],k]);},P=()=>{u(p.filter(T=>T.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:P,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"xs",children:jsxs(Stack,{gap:"md",children:[jsxs(Group,{grow:true,children:[jsx(NumberInput,{max:g[1],min:i,onChange:n,step:s,suffix:m,value:g[0]}),jsx(NumberInput,{max:a,min:g[0],onChange:d,step:s,suffix:m,value:g[1]})]}),jsx(RangeSlider,{label:null,max:a,min:i,minRange:r,onChange:f,step:s,value:g})]})})]})}function Ve({column:o}){let e=o.accessor,l=o.extend?.filterVariant,a=(o.extend?.filterOptions).data,[s,r]=useState(""),m=useMemo(()=>{if(!s.trim())return a;let n=s.toLowerCase().trim();return a.filter(d=>d.label.toLowerCase().includes(n))},[a,s]),{filters:p,setFilters:u}=D(),t=p.find(n=>n.accessor===e),c=t?.value.length??0,h=n=>{u(t?p.map(d=>d.accessor===e?{...d,value:n}:d):[...p,{variant:l,accessor:e,value:n}]);},g=n=>t?.value===n,f=()=>{u(p.filter(n=>n.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:f,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:n=>r(n.target.value),p:"4",styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:m.map(n=>jsx(Checkbox,{checked:g(n.value),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:n.label,labelPosition:"left",onChange:()=>h(n.value),radius:"xl",size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}}},`${e}-${n.value}`))})})]})]})}function Ne({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(t=>t.accessor===e),r=s?.value.length??0,m=t=>{a(s?t===""?i.filter(c=>c.accessor!==e):i.map(c=>c.accessor===e?{...c,value:t}:c):[...i,{variant:l,accessor:e,value:t}]);},p=t=>{m(t);},u=()=>{a(i.filter(t=>t.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:u,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(TextInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:t=>p(t.target.value),p:"4",value:s?.value??"",variant:"unstyled"})})]})}function jt(){let{filters:o,resetFilters:e}=D(),{columns:l,i18n:i}=b(),a=()=>{e();},s=l.filter(r=>r.extend?.filterable);return jsxs(Group,{gap:"xs",children:[s.map(r=>{switch(r.extend?.filterVariant){case F.TEXT:return jsx(Ne,{column:r},r.accessor);case F.NUMBER:return jsx(ze,{column:r},r.accessor);case F.SINGLE_SELECT:return jsx(Ve,{column:r},r.accessor);case F.MULTI_SELECT:return jsx(Ee,{column:r},r.accessor);case F.DATE:return jsx(Fe,{column:r},r.accessor);case F.DATE_RANGE:return jsx(Re,{column:r},r.accessor);case F.NUMBER_RANGE:return jsx(Oe,{column:r},r.accessor);default:return null}}),o.length>0&&jsx(Button,{color:"red",leftSection:jsx(IconX,{size:16}),onClick:a,variant:"outline",children:i.filter.resetFilter})]})}function no({recordsPerPageOptions:o=[10,20,30,40,50]}){let{page:e,pageSize:l,setPage:i,setPageSize:a}=D(),{paginationProps:s,i18n:r}=b(),{totalRecords:m}=s||{},[p,u]=useState(0),[{startRecord:t,endRecord:c},h]=useState({startRecord:0,endRecord:0});return useEffect(()=>{u(Math.ceil((m||0)/(l||(o[0]??10))));},[m,l,o]),useEffect(()=>{h({startRecord:(e-1)*l+1,endRecord:Math.min(e*l,m||0)});},[e,l,m]),p>0&&jsxs(Group,{align:"center",justify:"space-between",children:[jsx(Group,{children:jsxs(Text,{size:"sm",children:[r.pagination.startEndRecordOfTotalRecords[0]," ",t," ",r.pagination.startEndRecordOfTotalRecords[1]," ",c," ",r.pagination.startEndRecordOfTotalRecords[2]," ",m]})}),jsxs(Group,{children:[jsx(Text,{size:"sm",children:r.pagination.rowsPerPage}),jsx(NativeSelect,{data:o.map(g=>({label:g.toString(),value:g.toString()})),onChange:g=>a(Number(g.target.value)),size:"xs",value:l,w:70}),jsx(Space,{w:"md"}),jsxs(Text,{size:"sm",children:[r.pagination.pageOfTotalPages[0]," ",e," ",r.pagination.pageOfTotalPages[1]," ",p]}),jsx(Pagination,{onChange:g=>i(g),size:"sm",total:p,value:e,withControls:true,withEdges:true})]})]})}function ho(){let{columns:o,i18n:e}=b(),{search:l,setSearch:i}=D(),a=l.accessors.length,[s,r]=useState(""),m=useMemo(()=>o.filter(t=>t.extend?.searchable),[o]),p=useMemo(()=>{if(!s.trim())return m;let t=s.toLowerCase().trim();return m.filter(c=>(c.title?.toString()??"").toLowerCase().includes(t))},[m,s]),u=t=>{l.accessors.includes(t)?i({...l,accessors:l.accessors.filter(c=>c!==t)}):i({...l,accessors:[...l.accessors,t]});};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:a<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:a}),children:jsx(ActionIcon,{size:36,variant:"default",children:jsx(IconSearch,{size:16})})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:t=>r(t.target.value),p:"4",placeholder:e.search.searchAccessorsSearchPlaceholder,styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(t=>jsx(Checkbox,{checked:l.accessors.includes(t.accessor.toString()),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:t.title?.toString()??"",labelPosition:"left",onChange:()=>u(t.accessor.toString()),size:"xs",variant:"outline"},t.accessor.toString()))})})]})]})}function To(){let{search:o,setSearch:e}=D(),{i18n:l}=b(),i=a=>{e({...o,value:a});};return jsxs(Group,{gap:"xs",children:[jsx(ho,{}),jsx(TextInput,{onChange:a=>i(a.target.value),placeholder:l.search.search,rightSection:o.value.length>0&&jsx(CloseButton,{onClick:()=>i(""),size:"sm",variant:"transparent"}),value:o.value,w:"200px"})]})}function Ro({sort:o,index:e,sortableColumns:l,onAccessorChange:i,onDirectionChange:a,onRemoveSort:s}){let{i18n:r}=b(),{ref:m,handleRef:p}=useSortable({id:o.accessor,index:e});return jsxs(Group,{align:"center",gap:"xs",ref:m,wrap:"nowrap",children:[jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:l.map(u=>({label:u.title?.toString()??"",value:u.accessor})),onChange:u=>i(o.accessor,u),searchable:true,size:"xs",value:o.accessor}),jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:Object.values(N).map(u=>({label:r.sort[u]??"",value:u})),onChange:u=>a(o.accessor,u),size:"xs",value:o.direction}),jsx(ActionIcon,{"aria-label":"Remove sort",onClick:()=>s(o.accessor),size:"md",variant:"default",children:jsx(IconTrash,{size:16})}),jsx(ActionIcon,{"aria-label":"Drag to reorder",ref:p,size:"md",style:{cursor:"grab",flexShrink:0},variant:"default",children:jsx(IconGripHorizontal,{size:16})})]})}function Eo(){let{sorts:o,setSorts:e,resetSorts:l}=D(),{columns:i,i18n:a}=b(),s=i.filter(f=>f.extend?.sortable),r=s.filter(f=>!o.some(n=>n.accessor===f.accessor)),m=o.length,p=()=>{if(r.length>0&&r[0]){let f={accessor:r[0].accessor,direction:N.ASC};e([...o,f]);}},u=()=>{l();},t=f=>{e(o.filter(n=>n.accessor!==f));},c=(f,n)=>{if(n===null)return;let d=o.filter(P=>P.accessor!==f&&P.accessor!==n);e([...d,{accessor:n,direction:o.find(P=>P.accessor===f)?.direction||N.ASC}]);},h=(f,n)=>{n!==null&&e(o.map(d=>d.accessor===f?{...d,direction:n}:d));},g=f=>{if(f.canceled)return;let{source:n}=f.operation;if(n&&isSortable(n)){let{initialIndex:d,index:P}=n;d!==P&&e(T=>{let S=[...T],[k]=S.splice(d,1);return k&&S.splice(P,0,k),S});}};return jsxs(Popover,{shadow:"md",width:"450px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconArrowsSort,{size:16}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:m}),variant:"default",children:a.sort.sort})}),jsxs(Popover.Dropdown,{p:"sm",children:[jsx(DragDropProvider,{onDragEnd:g,children:jsx(Stack,{gap:"xs",children:o.map((f,n)=>jsx(Ro,{index:n,onAccessorChange:c,onDirectionChange:h,onRemoveSort:t,sort:f,sortableColumns:s},f.accessor))})}),jsx(Space,{h:"sm"}),jsxs(Group,{children:[jsx(Button,{color:"dark",disabled:r.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:p,size:"xs",variant:"filled",children:a.sort.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:u,size:"xs",variant:"default",children:a.sort.resetSort})]})]})]})}export{st as DteColumnsToggle,it as DteExtended,jt as DteFilter,no as DtePagination,$e as DteProvider,To as DteSearch,Eo as DteSortList,b as useDteContext,D as useDteQueryParams};
|
|
2
|
+
import {Popover,Button,TextInput,Divider,ScrollArea,Stack,Checkbox,Group,Text,NativeSelect,Space,Pagination,CloseButton,Badge,Indicator,NumberInput,RangeSlider,ActionIcon,Select}from'@mantine/core';import {IconAdjustmentsHorizontal,IconSearch,IconX,IconArrowsSort,IconPlus,IconRefresh,IconFilter,IconTrash,IconGripHorizontal}from'@tabler/icons-react';import {createContext,useContext,useState,useMemo,useEffect}from'react';import {jsx,jsxs}from'react/jsx-runtime';import {DataTable}from'mantine-datatable';import {useQueryState,parseAsInteger,parseAsJson}from'nuqs';import we,{z}from'zod';import {DatePicker}from'@mantine/dates';import L from'dayjs';import {DragDropProvider}from'@dnd-kit/react';import {isSortable,useSortable}from'@dnd-kit/react/sortable';var B={view:{columnsToggle:"Columns Toggle",columnsToggleSearchPlaceholder:"Search columns\u2026"},sort:{sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"},search:{search:"Search",searchAccessorsSearchPlaceholder:"Search columns\u2026"},filter:{resetFilter:"Reset Filters"},pagination:{rowsPerPage:"Rows per page",pageOfTotalPages:["Page","of"],startEndRecordOfTotalRecords:["","-","/"]}};var Te=createContext(void 0);function P(){let o=useContext(Te);if(!o)throw new Error("useDteContext must be used within a DteProvider");return o}function $e({children:o,urlKeys:e,defaultParams:l,storeColumnsKey:i,columns:a,originalUseDataTableColumnsResult:s,i18n:r}){if(!i)throw new Error("storeColumnsKey property is required");if(!a)throw new Error("columns property is required");let[m,p]=useState(0),[u,t]=useState([10,20,30,40,50]),c=useMemo(()=>({totalRecords:m,recordsPerPageOptions:u}),[m,u]),h=useMemo(()=>({view:{...B.view,...r?.view},sort:{...B.sort,...r?.sort},search:{...B.search,...r?.search},filter:{...B.filter,...r?.filter},pagination:{...B.pagination,...r?.pagination}}),[r]),g=useMemo(()=>({urlKeys:e,defaultParams:l,storeColumnsKey:i,columns:a,originalUseDataTableColumnsResult:s,paginationProps:c,setTotalRecords:p,setRecordsPerPageOptions:t,i18n:h}),[e,l,i,a,s,c,h]);return jsx(Te.Provider,{value:{...g},children:o})}function st(){let{originalUseDataTableColumnsResult:o,i18n:e}=P(),{effectiveColumns:l,columnsToggle:i,setColumnsToggle:a}=o,[s,r]=useState(""),m=useMemo(()=>i.filter(t=>t.toggleable),[i]),p=useMemo(()=>{if(!s.trim())return m;let t=s.toLowerCase().trim();return m.filter(c=>(l.find(g=>g.accessor===c.accessor)?.title?.toString()??"").toLowerCase().includes(t))},[m,l,s]),u=t=>{a(i.map(c=>c.accessor===t.accessor?{...c,toggled:!c.toggled}:c));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconAdjustmentsHorizontal,{size:16}),variant:"default",children:e.view.columnsToggle})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:t=>r(t.target.value),p:"4",placeholder:e.view.columnsToggleSearchPlaceholder,styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(t=>jsx(Checkbox,{checked:t.toggled,classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:l.find(c=>c.accessor===t.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>u(t),size:"xs",variant:"outline"},t.accessor))})})]})]})}function it(o){let{storeColumnsKey:e,originalUseDataTableColumnsResult:l}=P(),{effectiveColumns:i}=l,a={...o,columns:i,storeColumnsKey:e};return jsx(DataTable,{...a})}var N={ASC:"asc",DESC:"desc"},F={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var ve=z.object({accessor:z.string(),direction:z.enum(N)}),Pe=z.object({accessors:z.array(z.string()),value:z.string()}),be=z.object({variant:z.enum(F),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});function D(){let o={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},e={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},{urlKeys:l,defaultParams:i}=P();l&&(o=l),i&&(e={...e,...i});let[a,s]=useQueryState(o.page,parseAsInteger.withDefault(e.page)),[r,m]=useQueryState(o.pageSize,parseAsInteger.withDefault(e.pageSize)),[p,u]=useQueryState(o.sorts,parseAsJson(we.array(ve)).withDefault(e.sorts)),[t,c]=useQueryState(o.search,parseAsJson(Pe).withDefault(e.search)),[h,g]=useQueryState(o.filters,parseAsJson(we.array(be)).withDefault(e.filters)),f=()=>{s(e.page);},n=()=>{m(e.pageSize);},d=()=>{u(e.sorts);},b=()=>{c(e.search);},T=()=>{g(e.filters);};return {page:a,setPage:s,pageSize:r,setPageSize:m,sorts:p,setSorts:u,search:t,setSearch:c,filters:h,setFilters:g,resetPage:f,resetPageSize:n,resetSorts:d,resetSearch:b,resetFilters:T,resetAll:()=>{f(),n(),d(),b(),T();}}}function Fe({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(c=>c.accessor===e),r=s?.value?1:0,[m,p]=useState(s?L(Number.parseInt(s.value,10)).toISOString():null),u=c=>{if(p(c),c){let h=L(c).valueOf().toString();a(s?i.map(g=>g.accessor===e?{...g,value:h}:g):[...i,{variant:l,accessor:e,value:h}]);}},t=()=>{p(null),a(i.filter(c=>c.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:t,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{defaultDate:m?new Date(m):void 0,onChange:u,value:m})})]})}function Re({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(h=>h.accessor===e),r=s?.value.length??0,[m,p]=useState(s?.value[0]&&s?.value[1]?[L(Number.parseInt(s.value[0],10)).toISOString(),L(Number.parseInt(s.value[1],10)).toISOString()]:[null,null]),u=([h,g])=>{if(p([h,g]),h&&g){let[f,n]=[L(h).valueOf().toString(),L(g).valueOf().toString()];a(s?i.map(d=>d.accessor===e?{...d,value:[f,n]}:d):[...i,{variant:l,accessor:e,value:[f,n]}]);}},t=()=>{p([null,null]),a(i.filter(h=>h.accessor!==e));},c=m[1]&&m[0];return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:t,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,defaultDate:c?new Date(c):void 0,onChange:u,type:"range",value:m})})]})}function Ee({column:o}){let e=o.accessor,l=o.extend?.filterVariant,a=(o.extend?.filterOptions).data,[s,r]=useState(""),m=useMemo(()=>{if(!s.trim())return a;let n=s.toLowerCase().trim();return a.filter(d=>d.label.toLowerCase().includes(n))},[a,s]),{filters:p,setFilters:u}=D(),t=p.find(n=>n.accessor===e),c=t?.value.length??0,h=n=>{let d=t?.value??[],b=d.includes(n)?d.filter(T=>T!==n):[...d,n];if(b.length===0)u(p.filter(T=>T.accessor!==e));else {let T=p.some(S=>S.accessor===e);u(T?p.map(S=>S.accessor===e?{...S,value:b}:S):[...p,{variant:l,accessor:e,value:b}]);}},g=n=>p.some(d=>d.accessor===e&&d.value.includes(n)),f=()=>{u(p.filter(n=>n.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:f,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:n=>r(n.target.value),p:"4",styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:m.map(n=>jsx(Checkbox,{checked:g(n.value),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:n.label,labelPosition:"left",onChange:()=>h(n.value),size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${e}-${n.value}`))})})]})]})}function Ae({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(t=>t.accessor===e),r=s?.value.length??0,m=t=>{a(s?i.map(c=>c.accessor===e?{...c,value:t.toString()}:c):[...i,{variant:l,accessor:e,value:t.toString()}]);},p=t=>{let c=t;typeof t=="string"&&(c=Number.parseInt(t,10)),m(c);},u=()=>{a(i.filter(t=>t.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:u,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(NumberInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:t=>p(t),p:"4",value:s?.value?Number.parseInt(s.value,10):void 0,variant:"unstyled"})})]})}function Oe({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{min:i,max:a,step:s=1,minRange:r=1,suffix:m}=o.extend?.filterOptions,{filters:p,setFilters:u}=D(),t=p.find(T=>T.accessor===e),c=t?.value.length??0,h=T=>{let[S,k]=[T[0].toString(),T[1].toString()];u(t?p.map(X=>X.accessor===e?{...X,value:[S,k]}:X):[...p,{variant:l,accessor:e,value:[S,k]}]);},g=t?.value[0]&&t?.value[1]?[Number.parseInt(t.value[0],10),Number.parseInt(t.value[1],10)]:[i,a],f=([T,S])=>{h([T,S]);},n=T=>{let S=typeof T=="string"?Number.parseInt(T,10)||i:T,k=Math.min(Math.max(S,i),g[1]);h([k,g[1]]);},d=T=>{let S=typeof T=="string"?Number.parseInt(T,10)||a:T,k=Math.max(Math.min(S,a),g[0]);h([g[0],k]);},b=()=>{u(p.filter(T=>T.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:b,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"xs",children:jsxs(Stack,{gap:"md",children:[jsxs(Group,{grow:true,children:[jsx(NumberInput,{max:g[1],min:i,onChange:n,step:s,suffix:m,value:g[0]}),jsx(NumberInput,{max:a,min:g[0],onChange:d,step:s,suffix:m,value:g[1]})]}),jsx(RangeSlider,{label:null,max:a,min:i,minRange:r,onChange:f,step:s,value:g})]})})]})}function Ve({column:o}){let e=o.accessor,l=o.extend?.filterVariant,a=(o.extend?.filterOptions).data,[s,r]=useState(""),m=useMemo(()=>{if(!s.trim())return a;let n=s.toLowerCase().trim();return a.filter(d=>d.label.toLowerCase().includes(n))},[a,s]),{filters:p,setFilters:u}=D(),t=p.find(n=>n.accessor===e),c=t?.value.length??0,h=n=>{u(t?p.map(d=>d.accessor===e?{...d,value:n}:d):[...p,{variant:l,accessor:e,value:n}]);},g=n=>t?.value===n,f=()=>{u(p.filter(n=>n.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:c<=0,processing:true,children:jsxs(Button.Group,{children:[c>0&&jsx(Button,{onClick:f,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:n=>r(n.target.value),p:"4",styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:m.map(n=>jsx(Checkbox,{checked:g(n.value),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:n.label,labelPosition:"left",onChange:()=>h(n.value),radius:"xl",size:"xs",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}}},`${e}-${n.value}`))})})]})]})}function Ne({column:o}){let e=o.accessor,l=o.extend?.filterVariant,{filters:i,setFilters:a}=D(),s=i.find(t=>t.accessor===e),r=s?.value.length??0,m=t=>{a(s?t===""?i.filter(c=>c.accessor!==e):i.map(c=>c.accessor===e?{...c,value:t}:c):[...i,{variant:l,accessor:e,value:t}]);},p=t=>{m(t);},u=()=>{a(i.filter(t=>t.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:r<=0,processing:true,children:jsxs(Button.Group,{children:[r>0&&jsx(Button,{onClick:u,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:o.title})]})})}),jsx(Popover.Dropdown,{p:"0",children:jsx(TextInput,{autoFocus:true,leftSection:jsx(IconFilter,{size:16}),onChange:t=>p(t.target.value),p:"4",value:s?.value??"",variant:"unstyled"})})]})}function jt(){let{filters:o,resetFilters:e}=D(),{columns:l,i18n:i}=P(),a=()=>{e();},s=l.filter(r=>r.extend?.filterable);return jsxs(Group,{gap:"xs",children:[s.map(r=>{switch(r.extend?.filterVariant){case F.TEXT:return jsx(Ne,{column:r},r.accessor);case F.NUMBER:return jsx(Ae,{column:r},r.accessor);case F.SINGLE_SELECT:return jsx(Ve,{column:r},r.accessor);case F.MULTI_SELECT:return jsx(Ee,{column:r},r.accessor);case F.DATE:return jsx(Fe,{column:r},r.accessor);case F.DATE_RANGE:return jsx(Re,{column:r},r.accessor);case F.NUMBER_RANGE:return jsx(Oe,{column:r},r.accessor);default:return null}}),o.length>0&&jsx(Button,{color:"red",leftSection:jsx(IconX,{size:16}),onClick:a,variant:"outline",children:i.filter.resetFilter})]})}var no=[10,20,30,40,50];function so({recordsPerPageOptions:o=no}){let{page:e,pageSize:l,setPage:i,setPageSize:a}=D(),{paginationProps:s,i18n:r}=P(),{totalRecords:m}=s||{},[p,u]=useState(0),[{startRecord:t,endRecord:c},h]=useState({startRecord:0,endRecord:0});return useEffect(()=>{u(Math.ceil((m||0)/(l||(o[0]??10))));},[m,l,o]),useEffect(()=>{h({startRecord:(e-1)*l+1,endRecord:Math.min(e*l,m||0)});},[e,l,m]),p>0&&jsxs(Group,{align:"center",justify:"space-between",children:[jsx(Group,{children:jsxs(Text,{size:"sm",children:[r.pagination.startEndRecordOfTotalRecords[0]," ",t," ",r.pagination.startEndRecordOfTotalRecords[1]," ",c," ",r.pagination.startEndRecordOfTotalRecords[2]," ",m]})}),jsxs(Group,{children:[jsx(Text,{size:"sm",children:r.pagination.rowsPerPage}),jsx(NativeSelect,{data:o.map(g=>({label:g.toString(),value:g.toString()})),onChange:g=>a(Number(g.target.value)),size:"xs",value:l,w:70}),jsx(Space,{w:"md"}),jsxs(Text,{size:"sm",children:[r.pagination.pageOfTotalPages[0]," ",e," ",r.pagination.pageOfTotalPages[1]," ",p]}),jsx(Pagination,{onChange:g=>i(g),size:"sm",total:p,value:e,withControls:true,withEdges:true})]})]})}function To(){let{columns:o,i18n:e}=P(),{search:l,setSearch:i}=D(),a=l.accessors.length,[s,r]=useState(""),m=useMemo(()=>o.filter(t=>t.extend?.searchable),[o]),p=useMemo(()=>{if(!s.trim())return m;let t=s.toLowerCase().trim();return m.filter(c=>(c.title?.toString()??"").toLowerCase().includes(t))},[m,s]),u=t=>{l.accessors.includes(t)?i({...l,accessors:l.accessors.filter(c=>c!==t)}):i({...l,accessors:[...l.accessors,t]});};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:a<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:a}),children:jsx(ActionIcon,{size:36,variant:"default",children:jsx(IconSearch,{size:16})})})}),jsxs(Popover.Dropdown,{p:"0",children:[jsx(TextInput,{autoFocus:true,leftSection:jsx(IconSearch,{size:16}),onChange:t=>r(t.target.value),p:"4",placeholder:e.search.searchAccessorsSearchPlaceholder,styles:{input:{border:"none"}},value:s}),jsx(Divider,{}),jsx(ScrollArea.Autosize,{mah:180,type:"auto",children:jsx(Stack,{gap:"0",children:p.map(t=>jsx(Checkbox,{checked:l.accessors.includes(t.accessor.toString()),classNames:{root:"mantine-dte-checkbox-root",body:"mantine-dte-checkbox-body",labelWrapper:"mantine-dte-checkbox-label-wrapper",label:"mantine-dte-checkbox-label",input:"mantine-dte-checkbox-input",icon:"mantine-dte-checkbox-icon"},label:t.title?.toString()??"",labelPosition:"left",onChange:()=>u(t.accessor.toString()),size:"xs",variant:"outline"},t.accessor.toString()))})})]})]})}function Do(){let{search:o,setSearch:e}=D(),{i18n:l}=P(),i=a=>{e({...o,value:a});};return jsxs(Group,{gap:"xs",children:[jsx(To,{}),jsx(TextInput,{onChange:a=>i(a.target.value),placeholder:l.search.search,rightSection:o.value.length>0&&jsx(CloseButton,{onClick:()=>i(""),size:"sm",variant:"transparent"}),value:o.value,w:"200px"})]})}function Eo({sort:o,index:e,sortableColumns:l,onAccessorChange:i,onDirectionChange:a,onRemoveSort:s}){let{i18n:r}=P(),{ref:m,handleRef:p}=useSortable({id:o.accessor,index:e});return jsxs(Group,{align:"center",gap:"xs",ref:m,wrap:"nowrap",children:[jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:l.map(u=>({label:u.title?.toString()??"",value:u.accessor})),onChange:u=>i(o.accessor,u),searchable:true,size:"xs",value:o.accessor}),jsx(Select,{checkIconPosition:"right",comboboxProps:{withinPortal:false},data:Object.values(N).map(u=>({label:r.sort[u]??"",value:u})),onChange:u=>a(o.accessor,u),size:"xs",value:o.direction}),jsx(ActionIcon,{"aria-label":"Remove sort",onClick:()=>s(o.accessor),size:"md",variant:"default",children:jsx(IconTrash,{size:16})}),jsx(ActionIcon,{"aria-label":"Drag to reorder",ref:p,size:"md",style:{cursor:"grab",flexShrink:0},variant:"default",children:jsx(IconGripHorizontal,{size:16})})]})}function Io(){let{sorts:o,setSorts:e,resetSorts:l}=D(),{columns:i,i18n:a}=P(),s=i.filter(f=>f.extend?.sortable),r=s.filter(f=>!o.some(n=>n.accessor===f.accessor)),m=o.length,p=()=>{if(r.length>0&&r[0]){let f={accessor:r[0].accessor,direction:N.ASC};e([...o,f]);}},u=()=>{l();},t=f=>{e(o.filter(n=>n.accessor!==f));},c=(f,n)=>{if(n===null)return;let d=o.filter(b=>b.accessor!==f&&b.accessor!==n);e([...d,{accessor:n,direction:o.find(b=>b.accessor===f)?.direction||N.ASC}]);},h=(f,n)=>{n!==null&&e(o.map(d=>d.accessor===f?{...d,direction:n}:d));},g=f=>{if(f.canceled)return;let{source:n}=f.operation;if(n&&isSortable(n)){let{initialIndex:d,index:b}=n;d!==b&&e(T=>{let S=[...T],[k]=S.splice(d,1);return k&&S.splice(b,0,k),S});}};return jsxs(Popover,{shadow:"md",width:"450px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconArrowsSort,{size:16}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:m}),variant:"default",children:a.sort.sort})}),jsxs(Popover.Dropdown,{p:"sm",children:[jsx(DragDropProvider,{onDragEnd:g,children:jsx(Stack,{gap:"xs",children:o.map((f,n)=>jsx(Eo,{index:n,onAccessorChange:c,onDirectionChange:h,onRemoveSort:t,sort:f,sortableColumns:s},f.accessor))})}),jsx(Space,{h:"sm"}),jsxs(Group,{children:[jsx(Button,{color:"dark",disabled:r.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:p,size:"xs",variant:"filled",children:a.sort.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:u,size:"xs",variant:"default",children:a.sort.resetSort})]})]})]})}export{st as DteColumnsToggle,it as DteExtended,jt as DteFilter,so as DtePagination,$e as DteProvider,Do as DteSearch,Io as DteSortList,P as useDteContext,D as useDteQueryParams};
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.mantine-dte-checkbox-root {
|
|
2
|
+
&:hover {
|
|
3
|
+
background-color: var(--mantine-color-gray-1);
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
[data-mantine-color-scheme="dark"] .mantine-dte-checkbox-root:hover {
|
|
8
|
+
background-color: var(--mantine-color-dark-8);
|
|
9
|
+
}
|
|
10
|
+
.mantine-dte-checkbox-body {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
padding-left: var(--mantine-spacing-sm);
|
|
14
|
+
padding-right: var(--mantine-spacing-lg);
|
|
15
|
+
}
|
|
16
|
+
.mantine-dte-checkbox-label-wrapper {
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: space-between;
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
.mantine-dte-checkbox-label {
|
|
22
|
+
font-size: var(--mantine-font-size-xs);
|
|
23
|
+
padding-top: var(--mantine-spacing-xs);
|
|
24
|
+
padding-bottom: var(--mantine-spacing-xs);
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
}
|
|
27
|
+
.mantine-dte-checkbox-input {
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
}
|
|
30
|
+
.mantine-dte-checkbox-icon {
|
|
31
|
+
scale: 0.8;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InN0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubWFudGluZS1kdGUtY2hlY2tib3gtcm9vdCB7XG5cdCY6aG92ZXIge1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLW1hbnRpbmUtY29sb3ItZ3JheS0xKTtcblx0fVxufVxuXG5bZGF0YS1tYW50aW5lLWNvbG9yLXNjaGVtZT1cImRhcmtcIl0gLm1hbnRpbmUtZHRlLWNoZWNrYm94LXJvb3Q6aG92ZXIge1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tYW50aW5lLWNvbG9yLWRhcmstOCk7XG59XG4ubWFudGluZS1kdGUtY2hlY2tib3gtYm9keSB7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdHBhZGRpbmctbGVmdDogdmFyKC0tbWFudGluZS1zcGFjaW5nLXNtKTtcblx0cGFkZGluZy1yaWdodDogdmFyKC0tbWFudGluZS1zcGFjaW5nLWxnKTtcbn1cbi5tYW50aW5lLWR0ZS1jaGVja2JveC1sYWJlbC13cmFwcGVyIHtcblx0ZGlzcGxheTogZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXHR3aWR0aDogMTAwJTtcbn1cbi5tYW50aW5lLWR0ZS1jaGVja2JveC1sYWJlbCB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tbWFudGluZS1mb250LXNpemUteHMpO1xuXHRwYWRkaW5nLXRvcDogdmFyKC0tbWFudGluZS1zcGFjaW5nLXhzKTtcblx0cGFkZGluZy1ib3R0b206IHZhcigtLW1hbnRpbmUtc3BhY2luZy14cyk7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cbi5tYW50aW5lLWR0ZS1jaGVja2JveC1pbnB1dCB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cbi5tYW50aW5lLWR0ZS1jaGVja2JveC1pY29uIHtcblx0c2NhbGU6IDAuODtcbn1cbiJdfQ== */
|
package/dist/styles.layer.css
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
@import "./
|
|
1
|
+
@import "./styles.css" layer(mantine-datatable-extended);
|
|
2
|
+
|
|
3
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZXMubGF5ZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InN0eWxlcy5sYXllci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0IFwiLi9zdHlsZXMuY3NzXCIgbGF5ZXIobWFudGluZS1kYXRhdGFibGUtZXh0ZW5kZWQpO1xuIl19 */
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-datatable-extended",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.2",
|
|
5
5
|
"description": "An extension library for Mantine DataTable, providing powerful and easy-to-use features for building data tables in React applications.",
|
|
6
6
|
"tags": [
|
|
7
7
|
"mantine",
|
|
@@ -26,22 +26,14 @@
|
|
|
26
26
|
"exports": {
|
|
27
27
|
".": {
|
|
28
28
|
"types": "./dist/index.d.ts",
|
|
29
|
-
"import": "./dist/index.mjs"
|
|
30
|
-
"require": "./dist/index.cjs"
|
|
29
|
+
"import": "./dist/index.mjs"
|
|
31
30
|
},
|
|
32
31
|
"./server": {
|
|
33
32
|
"types": "./dist/server.d.ts",
|
|
34
|
-
"import": "./dist/server.mjs"
|
|
35
|
-
"require": "./dist/server.cjs"
|
|
33
|
+
"import": "./dist/server.mjs"
|
|
36
34
|
},
|
|
37
|
-
"./styles.css":
|
|
38
|
-
|
|
39
|
-
"default": "./dist/index.css"
|
|
40
|
-
},
|
|
41
|
-
"./styles.layer.css": {
|
|
42
|
-
"development": "./src/styles.layer.css",
|
|
43
|
-
"default": "./dist/styles.layer.css"
|
|
44
|
-
}
|
|
35
|
+
"./styles.css": "./dist/styles.css",
|
|
36
|
+
"./styles.layer.css": "./dist/styles.layer.css"
|
|
45
37
|
},
|
|
46
38
|
"files": [
|
|
47
39
|
"./dist",
|
|
@@ -51,6 +43,9 @@
|
|
|
51
43
|
"devDependencies": {
|
|
52
44
|
"@types/react": "^19.2.7",
|
|
53
45
|
"@types/react-dom": "^19.2.3",
|
|
46
|
+
"npm-run-all": "^4.1.5",
|
|
47
|
+
"postcss": "^8.5.6",
|
|
48
|
+
"postcss-cli": "^11.0.1",
|
|
54
49
|
"tsup": "^8.0.0",
|
|
55
50
|
"typescript": "^5",
|
|
56
51
|
"@repo/config": "0.0.0"
|
|
@@ -71,7 +66,9 @@
|
|
|
71
66
|
},
|
|
72
67
|
"sideEffects": false,
|
|
73
68
|
"scripts": {
|
|
74
|
-
"build": "tsup",
|
|
75
|
-
"dev": "
|
|
69
|
+
"build": "rm -rf dist; tsup; postcss src/styles*.css --dir dist",
|
|
70
|
+
"dev:bundle-css": "postcss src/styles*.css --dir dist --watch",
|
|
71
|
+
"dev:bundle-ts": "tsup --watch",
|
|
72
|
+
"dev": "run-p dev:*"
|
|
76
73
|
}
|
|
77
74
|
}
|
package/dist/index.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.mantine-dte-checkbox-root{&:hover{background-color:var(--mantine-color-gray-1)}}[data-mantine-color-scheme=dark] .mantine-dte-checkbox-root:hover{background-color:var(--mantine-color-dark-8)}.mantine-dte-checkbox-body{display:flex;align-items:center;padding-left:var(--mantine-spacing-sm);padding-right:var(--mantine-spacing-lg)}.mantine-dte-checkbox-label-wrapper{display:flex;justify-content:space-between;width:100%}.mantine-dte-checkbox-label{font-size:var(--mantine-font-size-xs);padding-top:var(--mantine-spacing-xs);padding-bottom:var(--mantine-spacing-xs);cursor:pointer}.mantine-dte-checkbox-input{cursor:pointer}.mantine-dte-checkbox-icon{scale:.8}
|