@cryptlex/web-components 6.6.19 → 6.6.22
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/components/alert.d.ts +1 -1
- package/dist/components/alert.js +1 -1
- package/dist/components/alert.js.map +1 -1
- package/dist/components/avatar.js +1 -1
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.d.ts +6 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/badge.js.map +1 -1
- package/dist/components/charts.js +1 -1
- package/dist/components/charts.js.map +1 -1
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/icons.d.ts +1 -0
- package/dist/components/icons.js +19 -14
- package/dist/components/icons.js.map +1 -1
- package/dist/components/object-table.js +1 -1
- package/dist/components/object-table.js.map +1 -1
- package/dist/components/progress-bar.d.ts +7 -0
- package/dist/components/progress-bar.js +2 -0
- package/dist/components/progress-bar.js.map +1 -0
- package/dist/components/sidebar.d.ts +8 -0
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/toast.js +1 -1
- package/dist/components/toast.js.map +1 -1
- package/lib/index.css +26 -13
- package/lib/tokens.css +63 -0
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
import { CtxIcon } from './icons';
|
|
4
4
|
export declare const alertVariants: (props?: ({
|
|
5
|
-
variant?: "success" | "default" | "destructive" | "
|
|
5
|
+
variant?: "success" | "default" | "destructive" | "neutral" | "warning" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export declare function Alert({ children, className, variant, icon, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
|
|
8
8
|
icon?: CtxIcon;
|
package/dist/components/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as i,jsx as n}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";import{classNames as l}from"../utilities/theme.js";import{IcInfo as u,IcWarning as m,IcCheck as d,IcError as f}from"./icons.js";import"clsx";import"react";const p=o("rounded-md transition-colors bg-elevation-1 border py-icon px-input body-sm inline-flex items-center gap-icon",{variants:{variant:{destructive:"text-destructive",success:"text-success",warning:"text-warning",neutral:"text-muted border-muted",default:"border-accent"}},defaultVariants:{variant:"default"}}),x=e=>{switch(e){case"destructive":return f;case"success":return d;case"warning":return m;case"neutral":case void 0:default:return u}};function k({children:e,className:s,variant:t,icon:c,...a}){const r=c??x(t);return i("div",{role:"alert",className:l(p({variant:t}),s),...a,children:[r&&n(r,{className:"inline-block size-icon shrink-0"}),n("span",{className:"inline-block flex-1 min-w-0 mt-0",children:e})]})}export{k as Alert,p as alertVariants};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sources":["../../lib/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { classNames } from '../utilities/theme';\nimport type { CtxIcon } from './icons';\nimport { IcCheck, IcError, IcInfo } from './icons';\n\nexport const alertVariants = cva(\n `rounded-md transition-colors bg-elevation-1 border py-icon px-input body-sm inline-flex items-center gap-icon`,\n {\n variants: {\n variant: {\n destructive: 'text-destructive',\n success: 'text-success',\n
|
|
1
|
+
{"version":3,"file":"alert.js","sources":["../../lib/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { classNames } from '../utilities/theme';\nimport type { CtxIcon } from './icons';\nimport { IcCheck, IcError, IcInfo, IcWarning } from './icons';\n\nexport const alertVariants = cva(\n `rounded-md transition-colors bg-elevation-1 border py-icon px-input body-sm inline-flex items-center gap-icon`,\n {\n variants: {\n variant: {\n destructive: 'text-destructive',\n success: 'text-success',\n warning: 'text-warning',\n neutral: 'text-muted border-muted',\n default: 'border-accent',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n// Default icons for each variant\nconst getDefaultIcon = (variant: string | null | undefined): CtxIcon | null => {\n switch (variant) {\n case 'destructive':\n return IcError;\n case 'success':\n return IcCheck;\n case 'warning':\n return IcWarning;\n case 'neutral':\n case undefined:\n default:\n return IcInfo;\n }\n};\nexport function Alert({\n children,\n className,\n variant,\n icon,\n ...props\n}: React.ComponentProps<'div'> &\n VariantProps<typeof alertVariants> & {\n icon?: CtxIcon;\n }) {\n // Overrides the default icon with the provided icon\n const Icon = icon ?? getDefaultIcon(variant);\n\n return (\n <div role=\"alert\" className={classNames(alertVariants({ variant }), className)} {...props}>\n {Icon && <Icon className=\"inline-block size-icon shrink-0\" />}\n <span className=\"inline-block flex-1 min-w-0 mt-0\">{children}</span>\n </div>\n );\n}\n"],"names":["alertVariants","cva","getDefaultIcon","variant","IcError","IcCheck","IcWarning","IcInfo","Alert","children","className","icon","props","Icon","jsxs","classNames","jsx"],"mappings":"4PAMO,MAAMA,EAAgBC,EACzB,gHACA,CACI,SAAU,CACN,QAAS,CACL,YAAa,mBACb,QAAS,eACT,QAAS,eACT,QAAS,0BACT,QAAS,eAAA,CACb,EAEJ,gBAAiB,CACb,QAAS,SAAA,CACb,CAER,EAGMC,EAAkBC,GAAuD,CAC3E,OAAQA,EAAA,CACJ,IAAK,cACD,OAAOC,EACX,IAAK,UACD,OAAOC,EACX,IAAK,UACD,OAAOC,EACX,IAAK,UACL,KAAK,OACL,QACI,OAAOC,CAAA,CAEnB,EACO,SAASC,EAAM,CAClB,SAAAC,EACA,UAAAC,EACA,QAAAP,EACA,KAAAQ,EACA,GAAGC,CACP,EAGO,CAEH,MAAMC,EAAOF,GAAQT,EAAeC,CAAO,EAE3C,OACIW,EAAC,MAAA,CAAI,KAAK,QAAQ,UAAWC,EAAWf,EAAc,CAAE,QAAAG,CAAA,CAAS,EAAGO,CAAS,EAAI,GAAGE,EAC/E,SAAA,CAAAC,GAAQG,EAACH,EAAA,CAAK,UAAU,iCAAA,CAAkC,EAC3DG,EAAC,OAAA,CAAK,UAAU,mCAAoC,SAAAP,CAAA,CAAS,CAAA,EACjE,CAER"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{classNames as r}from"../utilities/theme.js";import"clsx";function
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{classNames as r}from"../utilities/theme.js";import"clsx";function d({className:e,initials:n,...o}){return t("div",{className:r("relative body-sm font-mono font-bold flex items-center leading-none justify-center bg-accent text-accent-foreground select-none size-input shrink-0 overflow-hidden rounded-md",e),...o,children:n})}export{d as Avatar};
|
|
2
2
|
//# sourceMappingURL=avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sources":["../../lib/components/avatar.tsx"],"sourcesContent":["import { classNames } from '../utilities/theme';\n\ninterface InitialString {\n initials: string[2];\n}\nexport interface AvatarProps extends Omit<React.ComponentProps<'div'>, 'children'>, InitialString {}\nexport function Avatar({ className, initials, ...props }: AvatarProps) {\n return (\n <div\n className={classNames(\n 'relative body-sm font-mono font-bold flex items-center leading-none justify-center bg-accent text-accent-foreground select-none size-input shrink-0 overflow-hidden rounded-
|
|
1
|
+
{"version":3,"file":"avatar.js","sources":["../../lib/components/avatar.tsx"],"sourcesContent":["import { classNames } from '../utilities/theme';\n\ninterface InitialString {\n initials: string[2];\n}\nexport interface AvatarProps extends Omit<React.ComponentProps<'div'>, 'children'>, InitialString {}\nexport function Avatar({ className, initials, ...props }: AvatarProps) {\n return (\n <div\n className={classNames(\n 'relative body-sm font-mono font-bold flex items-center leading-none justify-center bg-accent text-accent-foreground select-none size-input shrink-0 overflow-hidden rounded-md',\n className\n )}\n {...props}\n >\n {initials}\n </div>\n );\n}\n"],"names":["Avatar","className","initials","props","jsx","classNames"],"mappings":"wGAMO,SAASA,EAAO,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,GAAsB,CACnE,OACIC,EAAC,MAAA,CACG,UAAWC,EACP,iLACAJ,CAAA,EAEH,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGb"}
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "success" | "destructive" | "neutral" | "warning" | null | undefined;
|
|
5
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
|
+
export declare function Badge({ className, children, variant, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): import("react/jsx-runtime").JSX.Element;
|
package/dist/components/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as u,jsx as e}from"react/jsx-runtime";import{cva as c}from"class-variance-authority";import{classNames as s}from"../utilities/theme.js";import"clsx";const o=c("leading-tight body-sm px-3 relative rounded-full inline-flex gap-2 items-center justify-start select-none h-input focus:outline-hidden focus:ring-1 focus:ring-ring",{variants:{variant:{success:"bg-success/20 text-success",destructive:"bg-destructive/20 text-destructive",warning:"bg-warning/20 text-warning",neutral:"bg-muted/20 text-muted"}},defaultVariants:{variant:"neutral"}}),d={success:"bg-success",destructive:"bg-destructive",warning:"bg-warning",neutral:"bg-muted"};function p({className:n,children:r,variant:t,...a}){const i=d[t??"neutral"];return u("span",{className:s(o({variant:t}),n),...a,children:[e("span",{role:"presentation",className:s("rounded-full size-2",i)}),e("span",{children:r})]})}export{p as Badge,o as badgeVariants};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sources":["../../lib/components/badge.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"badge.js","sources":["../../lib/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { classNames } from '../utilities/theme';\n\nexport const badgeVariants = cva(\n 'leading-tight body-sm px-3 relative rounded-full inline-flex gap-2 items-center justify-start select-none h-input focus:outline-hidden focus:ring-1 focus:ring-ring',\n {\n variants: {\n variant: {\n success: 'bg-success/20 text-success',\n destructive: 'bg-destructive/20 text-destructive',\n warning: 'bg-warning/20 text-warning',\n neutral: 'bg-muted/20 text-muted',\n },\n },\n defaultVariants: {\n variant: 'neutral',\n },\n }\n);\n\ntype BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;\n\nconst dotVariants: Record<BadgeVariant, string> = {\n success: 'bg-success',\n destructive: 'bg-destructive',\n warning: 'bg-warning',\n neutral: 'bg-muted',\n};\n\nexport function Badge({\n className,\n children,\n variant,\n ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n const dotClass = dotVariants[variant ?? 'neutral'];\n return (\n <span className={classNames(badgeVariants({ variant }), className)} {...props}>\n <span role=\"presentation\" className={classNames('rounded-full size-2', dotClass)}></span>\n {/* Contents */}\n <span>{children}</span>\n </span>\n );\n}\n"],"names":["badgeVariants","cva","dotVariants","Badge","className","children","variant","props","dotClass","jsxs","classNames","jsx"],"mappings":"iKAIO,MAAMA,EAAgBC,EACzB,sKACA,CACI,SAAU,CACN,QAAS,CACL,QAAS,6BACT,YAAa,qCACb,QAAS,6BACT,QAAS,wBAAA,CACb,EAEJ,gBAAiB,CACb,QAAS,SAAA,CACb,CAER,EAIMC,EAA4C,CAC9C,QAAS,aACT,YAAa,iBACb,QAAS,aACT,QAAS,UACb,EAEO,SAASC,EAAM,CAClB,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACP,EAAsE,CAClE,MAAMC,EAAWN,EAAYI,GAAW,SAAS,EACjD,OACIG,EAAC,OAAA,CAAK,UAAWC,EAAWV,EAAc,CAAE,QAAAM,CAAA,CAAS,EAAGF,CAAS,EAAI,GAAGG,EACpE,SAAA,CAAAI,EAAC,QAAK,KAAK,eAAe,UAAWD,EAAW,sBAAuBF,CAAQ,EAAG,EAElFG,EAAC,QAAM,SAAAN,CAAA,CAAS,CAAA,EACpB,CAER"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as
|
|
1
|
+
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as b,YAxis as v,CartesianGrid as k,Legend as S,Tooltip as C,ResponsiveContainer as c,LineChart as A,Line as L,BarChart as $,Bar as z,PieChart as K,Pie as T}from"recharts";import{formatNumber as m}from"../utilities/numbers.js";function W(t){return m(t,{notation:"compact",maximumFractionDigits:2})}function u({...t}){return r(b,{axisLine:!1,tickLine:!1,tick:{fill:"var(--color-muted-foreground)",fontSize:12},...t})}function p({...t}){return r(v,{axisLine:!1,tickLine:!1,tick:{fill:"var(--color-muted-foreground)",fontSize:12},width:48,tickFormatter:W,...t})}function h({...t}){return r(k,{vertical:!1,stroke:"var(--color-border)",strokeDasharray:"3 3",...t})}function s({...t}){return r(S,{iconSize:8,iconType:"circle",formatter:e=>r("span",{style:{color:"var(--color-muted-foreground)",fontSize:12,marginLeft:4},children:e}),wrapperStyle:{paddingTop:"1rem"},...t})}function d({...t}){return r(C,{formatter:e=>typeof e=="number"?m(e):e,cursor:{fill:"var(--color-neutral-3)",opacity:.5},contentStyle:{backgroundColor:"var(--color-elevation-1)",border:"1px solid var(--color-border)",borderRadius:"6px",boxShadow:"0 4px 12px rgba(0,0,0,0.08)",padding:"8px 12px"},labelStyle:{color:"var(--color-foreground)",fontWeight:"600",marginBottom:"4px",fontSize:12},itemStyle:{color:"var(--color-muted-foreground)",padding:"1px 0",fontSize:12},...t})}function j({className:t,data:e,config:o,...n}){return r(c,{...n,children:l(A,{className:"body-sm",data:e,margin:{top:4,right:4,left:0,bottom:0},children:[r(h,{}),r(u,{dataKey:o.xAxis.toString()}),r(p,{}),r(d,{}),r(s,{iconType:"plainline"}),o.lines.map((a,i)=>r(L,{strokeWidth:2,type:"monotone",dataKey:a.toString(),stroke:`var(--color-chart-${i%5+1})`,dot:!1,activeDot:{r:4,strokeWidth:0}},a.toString()))]})})}function w({className:t,data:e,config:o,...n}){return r(c,{className:t,...n,children:l($,{className:"body-sm",data:e,margin:{top:4,right:4,left:0,bottom:0},barCategoryGap:"30%",children:[r(h,{}),r(u,{dataKey:o.xAxis.toString()}),r(p,{}),r(d,{cursor:{fill:"var(--color-neutral-3)",opacity:.4}}),r(s,{}),o.bars.map((a,i)=>r(z,{dataKey:a.toString(),fill:`var(--color-chart-${i%5+1})`,fillOpacity:.15,stroke:`var(--color-chart-${i%5+1})`,strokeWidth:1.5,radius:[4,4,0,0]},a.toString()))]})})}function B(t){const{name:e,percent:o}=t;return`${e}: ${((typeof o=="number"?o:0)*100).toFixed(0)}%`}function D({data:t,variant:e="full",showLabels:o=!0,...n}){const a=e==="semi"?180:0,i=e==="semi"?0:360,g=e==="semi"?"100%":"50%";return r(c,{...n,children:l(K,{children:[r(d,{}),r(s,{}),r(T,{data:Object.entries(t).map(([x,y],f)=>({fill:`var(--color-chart-${f%5+1})`,fillOpacity:.75,stroke:`var(--color-chart-${f%5+1})`,strokeWidth:1.5,strokeOpacity:1,name:x,value:y})),dataKey:"value",nameKey:"name",cx:"50%",cy:g,innerRadius:"40%",paddingAngle:2,startAngle:a,endAngle:i,label:o?B:void 0,labelLine:{stroke:"var(--color-neutral-6)"},isAnimationActive:!0})]})})}export{w as Barchart,h as ChartCartesianGrid,s as ChartLegend,d as ChartTooltip,u as ChartXAxis,p as ChartYAxis,j as Linechart,D as PieChart,W as formateYAxisTick};
|
|
2
2
|
//# sourceMappingURL=charts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n Pie,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n PieChart as RechartsPieChart,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n type PieLabelRenderProps,\n} from 'recharts';\nimport { formatNumber } from '../utilities/numbers';\n\nexport function formateYAxisTick(value: number) {\n return formatNumber(value, {\n notation: 'compact',\n maximumFractionDigits: 2,\n });\n}\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return <RechartsXAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartYAxis({ ...props }: React.ComponentProps<typeof RechartsYAxis>) {\n return (\n <RechartsYAxis stroke=\"var(--color-neutral-6)\" className=\"p-5\" {...props} tickFormatter={formateYAxisTick} />\n );\n}\n\nexport function ChartCartesianGrid({ ...props }: React.ComponentProps<typeof RechartsCartesianGrid>) {\n return <RechartsCartesianGrid stroke=\"var(--color-neutral-4)\" {...props} />;\n}\n\nexport function ChartLegend({ ...props }: React.ComponentProps<typeof RechartsLegend>) {\n return (\n <RechartsLegend\n iconSize={12}\n formatter={v => <span className=\"text-foreground\">{v}</span>}\n wrapperStyle={{ background: 'var(--color-elevation-1)' }}\n {...props}\n />\n );\n}\n\nexport function ChartTooltip({ ...props }: React.ComponentProps<typeof RechartsTooltip>) {\n return (\n <RechartsTooltip\n formatter={v => (typeof v === 'number' ? formatNumber(v) : v)}\n contentStyle={{\n backgroundColor: 'var(--color-elevation-1)',\n border: '1px solid var(--color-border)',\n }}\n labelStyle={{\n color: 'var(--color-muted-foreground)',\n fontWeight: '600',\n marginBottom: '0.5rem',\n }}\n itemStyle={{\n color: 'var(--color-foreground)',\n padding: '0',\n }}\n {...props}\n />\n );\n}\nexport function Linechart<T extends object>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n lines: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer {...props}>\n <LineChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend iconType=\"plainline\" />\n {config.lines.map((l, i) => (\n <Line\n strokeWidth={2}\n type=\"monotone\"\n dataKey={l.toString()}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n />\n ))}\n </LineChart>\n </ResponsiveContainer>\n );\n}\n\nexport function Barchart<T>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n bars: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer className={className} {...props}>\n <BarChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend />\n {config.bars.map((b, i) => (\n <Bar\n dataKey={b.toString()}\n fill={`var(--color-chart-${(i % 5) + 1})`}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n />\n ))}\n </BarChart>\n </ResponsiveContainer>\n );\n}\n\nfunction getLabel(props: PieLabelRenderProps) {\n const { name, percent } = props;\n return `${name}: ${((typeof percent === 'number' ? percent : 0) * 100).toFixed(0)}%`;\n}\nexport function PieChart<T extends Record<string, number>>({\n data,\n variant = 'full',\n showLabels = true,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T;\n variant?: 'full' | 'semi';\n showLabels?: boolean;\n}) {\n const finalStartAngle = variant === 'semi' ? 180 : 0;\n const finalEndAngle = variant === 'semi' ? 0 : 360;\n const cy = variant === 'semi' ? '100%' : '50%';\n\n return (\n <ResponsiveContainer {...props}>\n <RechartsPieChart>\n <ChartTooltip />\n <ChartLegend />\n <Pie\n data={Object.entries(data).map(([name, value], i) => {\n return {\n fill: `var(--color-chart-${(i % 5) + 1})`,\n stroke: `var(--color-chart-${(i % 5) + 1})`,\n name,\n value,\n };\n })}\n dataKey=\"value\"\n nameKey=\"name\"\n cx=\"50%\"\n cy={cy}\n startAngle={finalStartAngle}\n endAngle={finalEndAngle}\n label={showLabels ? getLabel : undefined}\n labelLine={{ stroke: 'var(--color-neutral-6)' }}\n isAnimationActive={true}\n />\n </RechartsPieChart>\n </ResponsiveContainer>\n );\n}\n"],"names":["formateYAxisTick","value","formatNumber","ChartXAxis","props","jsx","RechartsXAxis","ChartYAxis","RechartsYAxis","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","v","ChartTooltip","RechartsTooltip","Linechart","className","data","config","ResponsiveContainer","LineChart","l","i","Line","Barchart","jsxs","BarChart","b","Bar","getLabel","name","percent","PieChart","variant","showLabels","finalStartAngle","finalEndAngle","cy","RechartsPieChart","Pie"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n Pie,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n PieChart as RechartsPieChart,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n type PieLabelRenderProps,\n} from 'recharts';\nimport { formatNumber } from '../utilities/numbers';\n\nexport function formateYAxisTick(value: number) {\n return formatNumber(value, {\n notation: 'compact',\n maximumFractionDigits: 2,\n });\n}\n\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return (\n <RechartsXAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}\n {...props}\n />\n );\n}\n\nexport function ChartYAxis({ ...props }: React.ComponentProps<typeof RechartsYAxis>) {\n return (\n <RechartsYAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}\n width={48}\n tickFormatter={formateYAxisTick}\n {...props}\n />\n );\n}\n\nexport function ChartCartesianGrid({ ...props }: React.ComponentProps<typeof RechartsCartesianGrid>) {\n return <RechartsCartesianGrid vertical={false} stroke=\"var(--color-border)\" strokeDasharray=\"3 3\" {...props} />;\n}\n\nexport function ChartLegend({ ...props }: React.ComponentProps<typeof RechartsLegend>) {\n return (\n <RechartsLegend\n iconSize={8}\n iconType=\"circle\"\n formatter={v => (\n <span style={{ color: 'var(--color-muted-foreground)', fontSize: 12, marginLeft: 4 }}>{v}</span>\n )}\n wrapperStyle={{ paddingTop: '1rem' }}\n {...props}\n />\n );\n}\n\nexport function ChartTooltip({ ...props }: React.ComponentProps<typeof RechartsTooltip>) {\n return (\n <RechartsTooltip\n formatter={v => (typeof v === 'number' ? formatNumber(v) : v)}\n cursor={{ fill: 'var(--color-neutral-3)', opacity: 0.5 }}\n contentStyle={{\n backgroundColor: 'var(--color-elevation-1)',\n border: '1px solid var(--color-border)',\n borderRadius: '6px',\n boxShadow: '0 4px 12px rgba(0,0,0,0.08)',\n padding: '8px 12px',\n }}\n labelStyle={{\n color: 'var(--color-foreground)',\n fontWeight: '600',\n marginBottom: '4px',\n fontSize: 12,\n }}\n itemStyle={{\n color: 'var(--color-muted-foreground)',\n padding: '1px 0',\n fontSize: 12,\n }}\n {...props}\n />\n );\n}\n\nexport function Linechart<T extends object>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n lines: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer {...props}>\n <LineChart className=\"body-sm\" data={data} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>\n <ChartCartesianGrid />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend iconType=\"plainline\" />\n {config.lines.map((l, i) => (\n <Line\n key={l.toString()}\n strokeWidth={2}\n type=\"monotone\"\n dataKey={l.toString()}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n dot={false}\n activeDot={{ r: 4, strokeWidth: 0 }}\n />\n ))}\n </LineChart>\n </ResponsiveContainer>\n );\n}\n\nexport function Barchart<T>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n bars: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer className={className} {...props}>\n <BarChart\n className=\"body-sm\"\n data={data}\n margin={{ top: 4, right: 4, left: 0, bottom: 0 }}\n barCategoryGap=\"30%\"\n >\n <ChartCartesianGrid />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip cursor={{ fill: 'var(--color-neutral-3)', opacity: 0.4 }} />\n <ChartLegend />\n {config.bars.map((b, i) => (\n <Bar\n key={b.toString()}\n dataKey={b.toString()}\n fill={`var(--color-chart-${(i % 5) + 1})`}\n fillOpacity={0.15}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n strokeWidth={1.5}\n radius={[4, 4, 0, 0]}\n />\n ))}\n </BarChart>\n </ResponsiveContainer>\n );\n}\n\nfunction getLabel(props: PieLabelRenderProps) {\n const { name, percent } = props;\n return `${name}: ${((typeof percent === 'number' ? percent : 0) * 100).toFixed(0)}%`;\n}\n\nexport function PieChart<T extends Record<string, number>>({\n data,\n variant = 'full',\n showLabels = true,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T;\n variant?: 'full' | 'semi';\n showLabels?: boolean;\n}) {\n const finalStartAngle = variant === 'semi' ? 180 : 0;\n const finalEndAngle = variant === 'semi' ? 0 : 360;\n const cy = variant === 'semi' ? '100%' : '50%';\n\n return (\n <ResponsiveContainer {...props}>\n <RechartsPieChart>\n <ChartTooltip />\n <ChartLegend />\n <Pie\n data={Object.entries(data).map(([name, value], i) => ({\n fill: `var(--color-chart-${(i % 5) + 1})`,\n fillOpacity: 0.75,\n stroke: `var(--color-chart-${(i % 5) + 1})`,\n strokeWidth: 1.5,\n strokeOpacity: 1,\n name,\n value,\n }))}\n dataKey=\"value\"\n nameKey=\"name\"\n cx=\"50%\"\n cy={cy}\n innerRadius=\"40%\"\n paddingAngle={2}\n startAngle={finalStartAngle}\n endAngle={finalEndAngle}\n label={showLabels ? getLabel : undefined}\n labelLine={{ stroke: 'var(--color-neutral-6)' }}\n isAnimationActive={true}\n />\n </RechartsPieChart>\n </ResponsiveContainer>\n );\n}\n"],"names":["formateYAxisTick","value","formatNumber","ChartXAxis","props","jsx","RechartsXAxis","ChartYAxis","RechartsYAxis","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","v","ChartTooltip","RechartsTooltip","Linechart","className","data","config","ResponsiveContainer","jsxs","LineChart","l","Line","Barchart","BarChart","b","Bar","getLabel","name","percent","PieChart","variant","showLabels","finalStartAngle","finalEndAngle","cy","RechartsPieChart","Pie","i"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as T,jsxs as d}from"react/jsx-runtime";import{parseAbsolute as ge,getLocalTimeZone as pe}from"@internationalized/date";import{createContext as fe,useState as N,useMemo as be,useEffect as W,useContext as he,useRef as Se}from"react";import{Button as C}from"./button.js";import{useSensors as ve,useSensor as V,PointerSensor as ye,KeyboardSensor as Ce,DndContext as we,closestCenter as Ie,DragOverlay as xe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as Ne,SortableContext as Te,verticalListSortingStrategy as Pe,arrayMove as De,useSortable as Fe}from"@dnd-kit/sortable";import{CSS as Ae}from"@dnd-kit/utilities";import{useQuery as Re}from"@tanstack/react-query";import{createColumnHelper as ee,useReactTable as Oe,getCoreRowModel as ze,flexRender as M}from"@tanstack/react-table";import{useLocalStorage as B}from"@uidotdev/usehooks";import{merge as Le}from"lodash-es";import{Badge as _e}from"./badge.js";import{DatePicker as Me}from"./date-picker.js";import{EasyMenu as P,MenuItem as I}from"./menu.js";import{MultiSelect as qe}from"./multi-select.js";import{NumberField as Ee}from"./numberfield.js";import{PopoverTrigger as je,Popover as $e}from"./popover.js";import{TextField as He}from"./textfield.js";import{formatDate as te}from"../utilities/date.js";import{useResourceFormatter as E,ALL_OS as ke}from"../utilities/resources.js";import{classNames as y}from"../utilities/theme.js";import{IcInfo as Ve,IcMoreVertical as Be,IcRefresh as Ke,IcColumns as Qe,IcGrip as Ue,IcFirst as Ge,IcLeft as Ze,IcRight as Xe,IcLast as Ye,IcSortAsc as Je,IcSortDesc as We,IcSortNone as et,IcCheck as K,IcMinus as tt,IcAccount as nt,IcLicense as rt,IcDate as at,IcFile as ot,IcFilter as it,IcRemove as st}from"./icons.js";import{MultipleIdSearchInput as lt}from"./id-search.js";import{Loader as ct}from"./loader.js";import{SearchField as ut}from"./searchfield.js";import{Table as dt,TableHeader as mt,TableRow as Q,TableHead as gt,TableBody as pt,TableCell as ft}from"./table.js";import{CountryName as bt}from"../utilities/countries.js";import{Duration as ht}from"../utilities/duration.js";import{formatDays as St,formatFilesize as vt,formatNumber as yt}from"../utilities/numbers.js";import{Checkbox as U}from"./checkbox.js";import{getSubscriptionStartTriggerLabel as Ct,ALL_LICENSE_TYPES as wt}from"./select-options.js";import{useCtxClient as It}from"../utilities/ctx-client.js";import{ControlledDialogProvider as xt,useControlledDialog as ne}from"./dialog.js";import"class-variance-authority";import"react-aria-components";import"clsx";import"./calendar.js";import"./form.js";import"./card.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"./kbd.js";import"../utilities/string.js";import"../utilities/empty-option.js";function Nt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const re=ee(),Tt=[re.accessor("checkbox",{header:({table:e})=>t(U,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(U,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],w="TableActions";function Pt(e){return e.length===0?[]:[re.accessor(w,{header:"Actions",id:w,enableHiding:!1,cell:({row:r})=>t(_t,{label:t(Be,{}),data:r.original,items:e}),enableSorting:!1})]}function En(){return ee()}function jn({path:e,pathParameters:r,columns:n,filterConfig:a,columnsToHideByDefault:o={},allowSelection:s=!1,initialFilters:c=[],tableActions:i}){const[u,g]=N({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:p,pagination:b}=u,[v,z]=N(""),[A,R]=N({}),[m,f]=N(c),S=be(()=>m.map(l=>Array.isArray(l.value)?{[l.property]:{[l.operator]:l.value.join(",")}}:{[l.property]:{[l.operator]:l.value}}).reduce((l,h)=>Le(l,h),{}),[m]),D={...m,page:b.pageIndex+1,limit:b.pageSize,sort:Nt(p[0]),search:v},le=It(),L=["get",e,D],[j,$]=B(`${L.join("")}_ctx_column_order_preference`,[]),[H,ce]=B(`${L.join("")}_ctx_column_visibility_preference`,{id:!1,...o}),_=l=>{g(h=>({...h,...l}))},O=Re({queryKey:L,queryFn:async()=>{const l=await le.GET(e,{params:{query:{page:D.page,limit:D.limit,sort:D.sort,search:D.search,...S},path:r}});return{data:l.data??[],total:Number.parseInt(l.response.headers.get("Pagination-Count")||"0")}}}),ue=i.filter(ie),de=[...s?Tt:[],...n,...Pt(ue??[])];function me(l){return typeof l=="function"}function F(l,h){return me(l)?l(h):l}const k=Oe({data:O.data?.data??[],columns:de,getCoreRowModel:ze(),rowCount:O.data?.total??0,manualPagination:!0,onPaginationChange:l=>{_({pagination:F(l,b)})},manualSorting:!0,onSortingChange:l=>{R({}),_({sorting:[...F(l,p)]})},manualFiltering:!0,onColumnVisibilityChange:l=>{ce(F(l,H))},onRowSelectionChange:l=>{R(F(l,A))},onColumnOrderChange:l=>{$(F(l,j))},state:{sorting:p,columnVisibility:H,pagination:b,rowSelection:A,columnOrder:j},meta:{refetch:O.refetch}});return W(()=>{const l=k.getAllLeafColumns();$([...l.filter(h=>h.id!==w).map(h=>h.id),...l.filter(h=>h.id===w).map(h=>h.id)])},[]),{tableState:u,updateTableState:_,query:O,setSearchQuery:z,searchQuery:v,tanTable:k,mergedFilters:S,filters:m,setFilters:f,filterConfig:a,tableActions:i,pathParameters:r}}const ae=fe(null);function x(){const e=he(ae);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function $n({children:e,...r}){return t(ae.Provider,{value:r,children:e})}function Hn({className:e,...r}){const{query:n,tanTable:a}=x();return t(T,{children:d(xt,{children:[t(Rt,{}),d("section",{...r,className:y("z-20 flex flex-col bg-elevation-1 border rounded-md",e),children:[d("div",{className:"w-full overflow-auto h-table relative rounded-md",tabIndex:0,children:[n.isLoading&&t(G,{className:"cursor-wait",children:t(ct,{})}),!n.isLoading&&a.getRowModel().rows.length===0&&t(G,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(Ve,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(T,{children:"No results found."}):t(T,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&a.getRowModel().rows.length!==0&&t(zt,{className:"w-full"})]}),d("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[d("div",{className:"flex gap-icon",children:[t(Dt,{}),t(At,{})]}),t(Ft,{})]})]})]})})}function G({children:e,className:r}){return d(T,{children:[t("span",{className:y(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function Dt(){const{tanTable:e}=x(),[r,n]=N(null),a=E(),o=ve(V(ye),V(Ce,{coordinateGetter:Ne}));return t(we,{sensors:o,collisionDetection:Ie,onDragStart:c=>{const{active:i}=c;n(i.id.toString())},onDragEnd:c=>{const{active:i,over:u}=c;if(u&&i.id!==u.id){const g=e.getState().columnOrder,p=g.indexOf(i.id.toString()),b=g.indexOf(u.id.toString());e.setColumnOrder([...De(g,p,b)])}n(null)},children:d(Te,{items:e.getState().columnOrder,strategy:Pe,children:[d(P,{label:d(T,{children:[t(Qe,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(c=>c.id),children:[t(I,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(c=>{const i=e.getAllFlatColumns().find(u=>u.id===c);return!i||i.id==="checkbox"||i.id===w?null:t(s,{column:i},i.id)})]}),t(xe,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:a(r)}):null})]})});function s({column:c}){const{attributes:i,listeners:u,setNodeRef:g,transform:p,transition:b}=Fe({id:c.id}),v={transform:Ae.Transform.toString(p),transition:b,zIndex:"999"};return d(I,{ref:g,style:v,...i,id:c.id,onAction:()=>c.toggleVisibility(),isDisabled:!c.getCanHide(),className:"flex items-center",children:[t(Ue,{...u,className:"size-icon cursor-grab"}),q(c),c.getIsSorted()&&t(oe,{className:"size-icon",direction:c.getIsSorted()})]})}}function Ft(){const{tanTable:e}=x(),r=e.getRowCount();return d("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),t(C,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ge,{})}),t(C,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ze,{})}),t(C,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Xe,{})}),t(C,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Ye,{})})]})}function At(){const{tanTable:e}=x(),r=[10,20,30,40,50];return t(P,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(I,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function Rt(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:a,tableActions:o}=x(),s=r.getSelectedRowModel().rows.length>0,c=o.filter(i=>i.resourceType!=="single").filter(i=>i.resourceType==="multiple"===s);return d("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-auto",children:[d("div",{className:"flex gap-icon",children:[t(C,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ke,{})}),t(ut,{value:n,onChange:a}),t(Ht,{})]}),t("div",{className:"flex gap-icon",children:t(Lt,{items:c,isFetching:e.isFetching})})]})}function oe({direction:e,...r}){return e==="asc"?t(Je,{className:"size-3.5",...r}):e==="desc"?t(We,{className:"size-3.5",...r}):t(et,{className:"size-3.5",...r})}function q(e){const r=E(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function Ot(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return t("span",{className:"tabular-nums",children:te(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:yt(n)});case"boolean":case"badge":return t(_e,{className:"uppercase w-full",children:String(n)});case"country":return t(bt,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return vt(n);case"days":return St(n);case"os":return ke[n]??n;case"licenseType":return wt[n]??n;case"subscriptionInterval":return ht.formatISODuration(n);case"subscriptionStartTrigger":return Ct(n);default:return String(n)}}function Z({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?q(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?q(e.column):M(r,e.getContext()):M(r,e.getContext())}function zt({className:e}){const{tanTable:r}=x(),n=(a,o,s="z-50")=>y("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&`bg-elevation-1 sticky right-0 ${s} text-center justify-center`,o);return d(dt,{className:y("table-auto border-0 rounded-md",e),children:[t(mt,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(a=>t(Q,{children:a.headers.map(o=>d(gt,{scope:"col",colSpan:o.colSpan,className:n(o.id===w,"bg-elevation-1"),children:[!o.column.getCanSort()&&!o.isPlaceholder&&t("div",{className:y("w-full py-1 inline-flex items-center gap-1 body-sm",o.id===w?"justify-center":"justify-start"),children:t(Z,{header:o})}),o.column.getCanSort()&&d(C,{variant:"ghost",className:y("w-full p-1",o.id===w?"justify-center":"justify-start"),onPress:o.column.getToggleSortingHandler(),children:[t("span",{children:t(Z,{header:o})}),t(oe,{direction:o.column.getIsSorted()})]})]},o.id))},a.id))}),t(pt,{children:r.getRowModel().rows.map(a=>t(Q,{className:y("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(o=>{const s=o.column.id===w,c=o.column.columnDef.meta?.displayType?Ot(o):M(o.column.columnDef.cell,o.getContext());return t(ft,{className:y(n(s,void 0,"z-1"),s&&"flex justify-center items-center"),children:c},o.id)})},a.id))})]})}function X(e){return e.resourceType==="none"}function ie(e){return e.resourceType==="single"}function Y(e){return e.resourceType==="multiple"}function Lt({items:e,isFetching:r}){const{openDialog:n,closeDialog:a}=ne(),{tanTable:o}=x();function s(i,u){return i.isDisabled?X(i)?i.isDisabled():Y(i)?i.isDisabled(u):!1:!1}const c=o.getSelectedRowModel().rows.map(i=>i.original);return t(T,{children:e.map((i,u)=>{const g=i.icon,p=s(i,c)||r;return d(C,{"aria-label":i.label,type:"button",isDisabled:p,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const v={event:b,openDialog:n,closeDialog:a};X(i)?i.onPress(v):Y(i)&&i.onPress({...v,data:c})},variant:i.variant??"neutral",children:[g&&t(g,{"aria-hidden":!0}),t("span",{children:i.label})]},`${i.label}-${u}`)})})}function _t({label:e,items:r,data:n}){const{openDialog:a,closeDialog:o}=ne();return t(P,{"aria-label":"Actions",label:e,size:"icon",children:r.map((s,c)=>{const i=s.icon,u=typeof s.label=="function"?s.label(n):s.label;return d(I,{id:typeof u=="string"?u:void 0,isDisabled:s.isDisabled?.(n)??!1,onAction:()=>{const g={openDialog:a,closeDialog:o};ie(s)&&s.onPress({...g,data:n})},children:[t(i,{className:"size-icon"}),u]},`${c}-${typeof u=="string"?u:""}`)})})}const kn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],J={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"},Mt={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤"};function qt(e,r){const n=`${r}-${Date.now()}`,a=se[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:a,value:!0};case"string":return{id:n,type:e,property:r,operator:a,value:""};case"date":return{id:n,type:e,property:r,operator:a,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:a,value:""};case"id-search":return{id:n,type:e,property:r,operator:a,value:[]};case"enum":return{id:n,type:e,property:r,operator:a,value:new Set};case"number":return{id:n,type:e,property:r,operator:a,value:0}}}const se={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function Et(e){switch(e.type){case"string":case"id":return e.value??"";case"number":return e.value?.toString()??"";case"bool":return e.value?"true":"false";case"date":return e.value?te(e.value,{dateStyle:"short"})??"":"";case"enum":return e.value&&e.value.size>0?`${e.value.size} selected`:"";case"id-search":return e.value&&e.value.length>0?e.value.length===1?"1 item":`${e.value.length} items`:""}}function jt({filter:e,filterConfig:r,pathParameters:n,onChange:a}){if(e.type==="string"||e.type==="id")return t(He,{autoFocus:!0,value:e.value??"",onChange:a,"aria-label":"Filter value"});if(e.type==="number")return t(Ee,{autoFocus:!0,value:e.value,onChange:a,"aria-label":"Filter value"});if(e.type==="bool")return d(P,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(I,{onAction:()=>a(!0),children:"True"}),t(I,{onAction:()=>a(!1),children:"False"})]});if(e.type==="date"){const o=e.value?ge(e.value,pe()):null;return t(Me,{autoFocus:!0,hideTimeZone:!0,value:o,onChange:s=>a(s?s.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const o=r[e.property];return o.type!=="enum"?null:t(qe,{autoFocus:!0,items:o.options,value:e.value??new Set,onChange:a,"aria-label":"Filter value"})}if(e.type==="id-search"){const o=r[e.property];if(o.type!=="id-search")return null;const s=n?{path:n,query:{}}:void 0;return t(lt,{autoFocus:!0,path:o.path,accessor:o.accessor,defaultParams:s,value:e.value??[],onChange:a,"aria-label":"Filter value"})}return null}function $t({filter:e,filterConfig:r,pathParameters:n,resourceFormatter:a,onRemove:o,onUpdate:s,isOpen:c,onOpenChange:i}){const u=se[e.type],g=Et(e);return d(je,{isOpen:c,onOpenChange:i,children:[d(C,{type:"button",variant:"neutral",className:"animate-in slide-in-from-left-10 fade-in rounded-full",children:[t("span",{className:"font-medium",children:a(e.property)}),t("span",{children:Mt[e.operator]}),g&&t("span",{children:g})]}),t($e,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(P,{label:J[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(p=>t(I,{onAction:()=>s({operator:p}),children:J[p]},p))}),t(jt,{filter:e,filterConfig:r,pathParameters:n,onChange:p=>s({value:p})}),t(C,{type:"button",variant:"destructive_neutral",onPress:o,"aria-label":`Remove ${a(e.property)} filter`,children:t(st,{})})]})})]})}function Ht({className:e,defaultFilters:r,...n}){const{filters:a,query:o,setFilters:s,filterConfig:c,pathParameters:i}=x(),u=E(),g=Object.keys(c).sort(),[p,b]=N(null),v=Se(!1);W(()=>{!v.current&&r&&r.length>0&&a.length===0&&s(r),v.current=!0},[]);const z=(m,f)=>{const S=qt(m,f);s([...a,S]),b(S.id)},A=m=>{s(a.filter(f=>f.id!==m))},R=(m,f)=>{s(a.map(S=>S.id===m?{...S,...f}:S))};return d("section",{...n,className:y("flex flex-wrap gap-icon items-center",e),children:[a.map(m=>t($t,{filter:m,filterConfig:c,pathParameters:i,resourceFormatter:u,onRemove:()=>A(m.id),onUpdate:f=>R(m.id,f),isOpen:p===m.id,onOpenChange:f=>b(f?m.id:null)},m.id)),t(P,{label:t(it,{}),isDisabled:o.isPending||g.length===0,variant:"neutral","aria-label":"Add filter",children:g.map(m=>{const f=c[m].type,S=kt[f];return d(I,{className:"!justify-between",onAction:()=>z(f,m),children:[u(m),t(S,{})]},m)})})]})}const kt={"id-search":ot,bool:K,date:at,enum:rt,id:nt,number:tt,string:K};export{J as C,Ht as D,Hn as DataTable,ae as DataTableContext,$n as DataTableProvider,kn as F,En as getColumnHelper,x as useDataTable,jn as useDataTableState};
|
|
1
|
+
"use client";import{jsx as t,Fragment as T,jsxs as d}from"react/jsx-runtime";import{parseAbsolute as pe,getLocalTimeZone as fe}from"@internationalized/date";import{createContext as be,useState as x,useMemo as he,useEffect as ee,useContext as Se,useRef as ve}from"react";import{Button as w}from"./button.js";import{useSensors as ye,useSensor as V,PointerSensor as we,KeyboardSensor as Ce,DndContext as Ie,closestCenter as Ne,DragOverlay as xe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as Te,SortableContext as Pe,verticalListSortingStrategy as De,arrayMove as Fe,useSortable as Ae}from"@dnd-kit/sortable";import{CSS as Re}from"@dnd-kit/utilities";import{useQuery as Oe}from"@tanstack/react-query";import{createColumnHelper as te,useReactTable as ze,getCoreRowModel as Le,flexRender as M}from"@tanstack/react-table";import{useLocalStorage as B}from"@uidotdev/usehooks";import{merge as _e}from"lodash-es";import{Badge as K}from"./badge.js";import{DatePicker as Me}from"./date-picker.js";import{EasyMenu as P,MenuItem as I}from"./menu.js";import{MultiSelect as qe}from"./multi-select.js";import{NumberField as Ee}from"./numberfield.js";import{PopoverTrigger as je,Popover as $e}from"./popover.js";import{TextField as He}from"./textfield.js";import{formatDate as ne}from"../utilities/date.js";import{useResourceFormatter as E,ALL_OS as ke}from"../utilities/resources.js";import{classNames as y}from"../utilities/theme.js";import{IcInfo as Ve,IcMoreVertical as Be,IcRefresh as Ke,IcColumns as Qe,IcGrip as Ue,IcFirst as Ge,IcLeft as Ze,IcRight as Xe,IcLast as Ye,IcSortAsc as Je,IcSortDesc as We,IcSortNone as et,IcCheck as Q,IcMinus as tt,IcAccount as nt,IcLicense as rt,IcDate as at,IcFile as ot,IcFilter as it,IcRemove as st}from"./icons.js";import{MultipleIdSearchInput as lt}from"./id-search.js";import{Loader as ct}from"./loader.js";import{SearchField as ut}from"./searchfield.js";import{Table as dt,TableHeader as mt,TableRow as U,TableHead as gt,TableBody as pt,TableCell as ft}from"./table.js";import{CountryName as bt}from"../utilities/countries.js";import{Duration as ht}from"../utilities/duration.js";import{formatDays as St,formatFilesize as vt,formatNumber as yt}from"../utilities/numbers.js";import{Checkbox as G}from"./checkbox.js";import{getSubscriptionStartTriggerLabel as wt,ALL_LICENSE_TYPES as Ct}from"./select-options.js";import{useCtxClient as It}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Nt,useControlledDialog as re}from"./dialog.js";import"class-variance-authority";import"react-aria-components";import"clsx";import"./calendar.js";import"./form.js";import"./card.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"./kbd.js";import"../utilities/string.js";import"../utilities/empty-option.js";function xt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const ae=te(),Tt=[ae.accessor("checkbox",{header:({table:e})=>t(G,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(G,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],C="TableActions";function Pt(e){return e.length===0?[]:[ae.accessor(C,{header:"Actions",id:C,enableHiding:!1,cell:({row:r})=>t(_t,{label:t(Be,{}),data:r.original,items:e}),enableSorting:!1})]}function En(){return te()}function jn({path:e,pathParameters:r,columns:n,filterConfig:a,columnsToHideByDefault:o={},allowSelection:s=!1,initialFilters:c=[],tableActions:i}){const[u,g]=x({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:p,pagination:b}=u,[v,z]=x(""),[A,R]=x({}),[m,f]=x(c),S=he(()=>m.map(l=>Array.isArray(l.value)?{[l.property]:{[l.operator]:l.value.join(",")}}:{[l.property]:{[l.operator]:l.value}}).reduce((l,h)=>_e(l,h),{}),[m]),D={...m,page:b.pageIndex+1,limit:b.pageSize,sort:xt(p[0]),search:v},ce=It(),L=["get",e,D],[j,$]=B(`${L.join("")}_ctx_column_order_preference`,[]),[H,ue]=B(`${L.join("")}_ctx_column_visibility_preference`,{id:!1,...o}),_=l=>{g(h=>({...h,...l}))},O=Oe({queryKey:L,queryFn:async()=>{const l=await ce.GET(e,{params:{query:{page:D.page,limit:D.limit,sort:D.sort,search:D.search,...S},path:r}});return{data:l.data??[],total:Number.parseInt(l.response.headers.get("Pagination-Count")||"0")}}}),de=i.filter(se),me=[...s?Tt:[],...n,...Pt(de??[])];function ge(l){return typeof l=="function"}function F(l,h){return ge(l)?l(h):l}const k=ze({data:O.data?.data??[],columns:me,getCoreRowModel:Le(),rowCount:O.data?.total??0,manualPagination:!0,onPaginationChange:l=>{_({pagination:F(l,b)})},manualSorting:!0,onSortingChange:l=>{R({}),_({sorting:[...F(l,p)]})},manualFiltering:!0,onColumnVisibilityChange:l=>{ue(F(l,H))},onRowSelectionChange:l=>{R(F(l,A))},onColumnOrderChange:l=>{$(F(l,j))},state:{sorting:p,columnVisibility:H,pagination:b,rowSelection:A,columnOrder:j},meta:{refetch:O.refetch}});return ee(()=>{const l=k.getAllLeafColumns();$([...l.filter(h=>h.id!==C).map(h=>h.id),...l.filter(h=>h.id===C).map(h=>h.id)])},[]),{tableState:u,updateTableState:_,query:O,setSearchQuery:z,searchQuery:v,tanTable:k,mergedFilters:S,filters:m,setFilters:f,filterConfig:a,tableActions:i,pathParameters:r}}const oe=be(null);function N(){const e=Se(oe);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function $n({children:e,...r}){return t(oe.Provider,{value:r,children:e})}function Hn({className:e,...r}){const{query:n,tanTable:a}=N();return t(T,{children:d(Nt,{children:[t(Rt,{}),d("section",{...r,className:y("z-20 flex flex-col bg-elevation-1 border rounded-md",e),children:[d("div",{className:"w-full overflow-auto h-table relative rounded-md",tabIndex:0,children:[n.isLoading&&t(Z,{className:"cursor-wait",children:t(ct,{})}),!n.isLoading&&a.getRowModel().rows.length===0&&t(Z,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(Ve,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(T,{children:"No results found."}):t(T,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&a.getRowModel().rows.length!==0&&t(zt,{className:"w-full"})]}),d("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[d("div",{className:"flex gap-icon",children:[t(Dt,{}),t(At,{})]}),t(Ft,{})]})]})]})})}function Z({children:e,className:r}){return d(T,{children:[t("span",{className:y(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function Dt(){const{tanTable:e}=N(),[r,n]=x(null),a=E(),o=ye(V(we),V(Ce,{coordinateGetter:Te}));return t(Ie,{sensors:o,collisionDetection:Ne,onDragStart:c=>{const{active:i}=c;n(i.id.toString())},onDragEnd:c=>{const{active:i,over:u}=c;if(u&&i.id!==u.id){const g=e.getState().columnOrder,p=g.indexOf(i.id.toString()),b=g.indexOf(u.id.toString());e.setColumnOrder([...Fe(g,p,b)])}n(null)},children:d(Pe,{items:e.getState().columnOrder,strategy:De,children:[d(P,{label:d(T,{children:[t(Qe,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(c=>c.id),children:[t(I,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(c=>{const i=e.getAllFlatColumns().find(u=>u.id===c);return!i||i.id==="checkbox"||i.id===C?null:t(s,{column:i},i.id)})]}),t(xe,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:a(r)}):null})]})});function s({column:c}){const{attributes:i,listeners:u,setNodeRef:g,transform:p,transition:b}=Ae({id:c.id}),v={transform:Re.Transform.toString(p),transition:b,zIndex:"999"};return d(I,{ref:g,style:v,...i,id:c.id,onAction:()=>c.toggleVisibility(),isDisabled:!c.getCanHide(),className:"flex items-center",children:[t(Ue,{...u,className:"size-icon cursor-grab"}),q(c),c.getIsSorted()&&t(ie,{className:"size-icon",direction:c.getIsSorted()})]})}}function Ft(){const{tanTable:e}=N(),r=e.getRowCount();return d("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),t(w,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ge,{})}),t(w,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ze,{})}),t(w,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Xe,{})}),t(w,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Ye,{})})]})}function At(){const{tanTable:e}=N(),r=[10,20,30,40,50];return t(P,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(I,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function Rt(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:a,tableActions:o}=N(),s=r.getSelectedRowModel().rows.length>0,c=o.filter(i=>i.resourceType!=="single").filter(i=>i.resourceType==="multiple"===s);return d("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-auto",children:[d("div",{className:"flex gap-icon",children:[t(w,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ke,{})}),t(ut,{value:n,onChange:a}),t(Ht,{})]}),t("div",{className:"flex gap-icon",children:t(Lt,{items:c,isFetching:e.isFetching})})]})}function ie({direction:e,...r}){return e==="asc"?t(Je,{className:"size-3.5",...r}):e==="desc"?t(We,{className:"size-3.5",...r}):t(et,{className:"size-3.5",...r})}function q(e){const r=E(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function Ot(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return t("span",{className:"tabular-nums",children:ne(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:yt(n)});case"boolean":return t(K,{variant:n?"success":"destructive",className:"w-full capitalize",children:String(n)});case"badge":return t(K,{className:"w-full",children:String(n)});case"country":return t(bt,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return vt(n);case"days":return St(n);case"os":return ke[n]??n;case"licenseType":return Ct[n]??n;case"subscriptionInterval":return ht.formatISODuration(n);case"subscriptionStartTrigger":return wt(n);default:return String(n)}}function X({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?q(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?q(e.column):M(r,e.getContext()):M(r,e.getContext())}function zt({className:e}){const{tanTable:r}=N(),n=(a,o,s="z-50")=>y("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&`bg-elevation-1 sticky right-0 ${s} text-center justify-center`,o);return d(dt,{className:y("table-auto border-0 rounded-md",e),children:[t(mt,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(a=>t(U,{children:a.headers.map(o=>d(gt,{scope:"col",colSpan:o.colSpan,className:n(o.id===C,"bg-elevation-1"),children:[!o.column.getCanSort()&&!o.isPlaceholder&&t("div",{className:y("w-full py-1 inline-flex items-center gap-1 body-sm",o.id===C?"justify-center":"justify-start"),children:t(X,{header:o})}),o.column.getCanSort()&&d(w,{variant:"ghost",className:y("w-full p-1",o.id===C?"justify-center":"justify-start"),onPress:o.column.getToggleSortingHandler(),children:[t("span",{children:t(X,{header:o})}),t(ie,{direction:o.column.getIsSorted()})]})]},o.id))},a.id))}),t(pt,{children:r.getRowModel().rows.map(a=>t(U,{className:y("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(o=>{const s=o.column.id===C,c=o.column.columnDef.meta?.displayType?Ot(o):M(o.column.columnDef.cell,o.getContext());return t(ft,{className:y(n(s,void 0,"z-1"),s&&"flex justify-center items-center"),children:c},o.id)})},a.id))})]})}function Y(e){return e.resourceType==="none"}function se(e){return e.resourceType==="single"}function J(e){return e.resourceType==="multiple"}function Lt({items:e,isFetching:r}){const{openDialog:n,closeDialog:a}=re(),{tanTable:o}=N();function s(i,u){return i.isDisabled?Y(i)?i.isDisabled():J(i)?i.isDisabled(u):!1:!1}const c=o.getSelectedRowModel().rows.map(i=>i.original);return t(T,{children:e.map((i,u)=>{const g=i.icon,p=s(i,c)||r;return d(w,{"aria-label":i.label,type:"button",isDisabled:p,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const v={event:b,openDialog:n,closeDialog:a};Y(i)?i.onPress(v):J(i)&&i.onPress({...v,data:c})},variant:i.variant??"neutral",children:[g&&t(g,{"aria-hidden":!0}),t("span",{children:i.label})]},`${i.label}-${u}`)})})}function _t({label:e,items:r,data:n}){const{openDialog:a,closeDialog:o}=re();return t(P,{"aria-label":"Actions",label:e,size:"icon",children:r.map((s,c)=>{const i=s.icon,u=typeof s.label=="function"?s.label(n):s.label;return d(I,{id:typeof u=="string"?u:void 0,isDisabled:s.isDisabled?.(n)??!1,onAction:()=>{const g={openDialog:a,closeDialog:o};se(s)&&s.onPress({...g,data:n})},children:[t(i,{className:"size-icon"}),u]},`${c}-${typeof u=="string"?u:""}`)})})}const kn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],W={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"},Mt={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤"};function qt(e,r){const n=`${r}-${Date.now()}`,a=le[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:a,value:!0};case"string":return{id:n,type:e,property:r,operator:a,value:""};case"date":return{id:n,type:e,property:r,operator:a,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:a,value:""};case"id-search":return{id:n,type:e,property:r,operator:a,value:[]};case"enum":return{id:n,type:e,property:r,operator:a,value:new Set};case"number":return{id:n,type:e,property:r,operator:a,value:0}}}const le={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function Et(e){switch(e.type){case"string":case"id":return e.value??"";case"number":return e.value?.toString()??"";case"bool":return e.value?"true":"false";case"date":return e.value?ne(e.value,{dateStyle:"short"})??"":"";case"enum":return e.value&&e.value.size>0?`${e.value.size} selected`:"";case"id-search":return e.value&&e.value.length>0?e.value.length===1?"1 item":`${e.value.length} items`:""}}function jt({filter:e,filterConfig:r,pathParameters:n,onChange:a}){if(e.type==="string"||e.type==="id")return t(He,{autoFocus:!0,value:e.value??"",onChange:a,"aria-label":"Filter value"});if(e.type==="number")return t(Ee,{autoFocus:!0,value:e.value,onChange:a,"aria-label":"Filter value"});if(e.type==="bool")return d(P,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(I,{onAction:()=>a(!0),children:"True"}),t(I,{onAction:()=>a(!1),children:"False"})]});if(e.type==="date"){const o=e.value?pe(e.value,fe()):null;return t(Me,{autoFocus:!0,hideTimeZone:!0,value:o,onChange:s=>a(s?s.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const o=r[e.property];return o.type!=="enum"?null:t(qe,{autoFocus:!0,items:o.options,value:e.value??new Set,onChange:a,"aria-label":"Filter value"})}if(e.type==="id-search"){const o=r[e.property];if(o.type!=="id-search")return null;const s=n?{path:n,query:{}}:void 0;return t(lt,{autoFocus:!0,path:o.path,accessor:o.accessor,defaultParams:s,value:e.value??[],onChange:a,"aria-label":"Filter value"})}return null}function $t({filter:e,filterConfig:r,pathParameters:n,resourceFormatter:a,onRemove:o,onUpdate:s,isOpen:c,onOpenChange:i}){const u=le[e.type],g=Et(e);return d(je,{isOpen:c,onOpenChange:i,children:[d(w,{type:"button",variant:"primary_neutral",className:"animate-in slide-in-from-left-10 fade-in",children:[t("span",{className:"font-medium",children:a(e.property)}),t("span",{children:Mt[e.operator]}),g&&t("span",{children:g})]}),t($e,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(P,{label:W[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(p=>t(I,{onAction:()=>s({operator:p}),children:W[p]},p))}),t(jt,{filter:e,filterConfig:r,pathParameters:n,onChange:p=>s({value:p})}),t(w,{type:"button",variant:"destructive",onPress:o,"aria-label":`Remove ${a(e.property)} filter`,children:t(st,{})})]})})]})}function Ht({className:e,defaultFilters:r,...n}){const{filters:a,query:o,setFilters:s,filterConfig:c,pathParameters:i}=N(),u=E(),g=Object.keys(c).sort(),[p,b]=x(null),v=ve(!1);ee(()=>{!v.current&&r&&r.length>0&&a.length===0&&s(r),v.current=!0},[]);const z=(m,f)=>{const S=qt(m,f);s([...a,S]),b(S.id)},A=m=>{s(a.filter(f=>f.id!==m))},R=(m,f)=>{s(a.map(S=>S.id===m?{...S,...f}:S))};return d("section",{...n,className:y("flex flex-wrap gap-icon items-center",e),children:[a.map(m=>t($t,{filter:m,filterConfig:c,pathParameters:i,resourceFormatter:u,onRemove:()=>A(m.id),onUpdate:f=>R(m.id,f),isOpen:p===m.id,onOpenChange:f=>b(f?m.id:null)},m.id)),t(P,{label:t(it,{}),isDisabled:o.isPending||g.length===0,variant:"neutral","aria-label":"Add filter",children:g.map(m=>{const f=c[m].type,S=kt[f];return d(I,{className:"!justify-between",onAction:()=>z(f,m),children:[u(m),t(S,{})]},m)})})]})}const kt={"id-search":ot,bool:Q,date:at,enum:rt,id:nt,number:tt,string:Q};export{W as C,Ht as D,Hn as DataTable,oe as DataTableContext,$n as DataTableProvider,kn as F,En as getColumnHelper,N as useDataTable,jn as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|