warqadui 0.0.102 → 0.0.104
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.d.mts +9 -4
- package/dist/index.d.ts +9 -4
- package/dist/index.js +70 -14
- package/dist/index.mjs +70 -14
- package/dist/styles.js +3 -0
- package/dist/styles.mjs +3 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -546,6 +546,7 @@ interface DataTableProps<TData, TValue> {
|
|
|
546
546
|
searchPlaceholder?: string;
|
|
547
547
|
className?: string;
|
|
548
548
|
verticalLines?: boolean;
|
|
549
|
+
verclines?: boolean;
|
|
549
550
|
rowPadding?: string;
|
|
550
551
|
index?: boolean;
|
|
551
552
|
renderSubComponent?: (props: {
|
|
@@ -570,7 +571,7 @@ interface DataTableProps<TData, TValue> {
|
|
|
570
571
|
filterables?: boolean;
|
|
571
572
|
emptyState?: React__default.ReactNode;
|
|
572
573
|
}
|
|
573
|
-
declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
|
|
574
|
+
declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
|
|
574
575
|
defaultExpanded, onChange, selectable, filterables, emptyState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
575
576
|
|
|
576
577
|
declare module "@tanstack/react-table" {
|
|
@@ -604,6 +605,7 @@ interface PostTableProps<TData> {
|
|
|
604
605
|
isLoading?: boolean;
|
|
605
606
|
className?: string;
|
|
606
607
|
verticalLines?: boolean;
|
|
608
|
+
verclines?: boolean;
|
|
607
609
|
rowPadding?: string;
|
|
608
610
|
index?: boolean;
|
|
609
611
|
renderAddButton?: (entryData: Partial<TData>, handleSaveField: () => void, isSaving: boolean) => React__default.ReactNode;
|
|
@@ -618,7 +620,7 @@ interface PostTableProps<TData> {
|
|
|
618
620
|
onEdit?: (row: TData) => void;
|
|
619
621
|
onDelete?: (row: TData) => void;
|
|
620
622
|
}
|
|
621
|
-
declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
|
|
623
|
+
declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
|
|
622
624
|
defaultExpanded, submitLoading, onCancel, onEdit, onDelete, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
623
625
|
|
|
624
626
|
type SimpleTableColumn<TData> = ColumnDef<TData, any> & {
|
|
@@ -639,6 +641,7 @@ interface SimpleTableProps<TData> {
|
|
|
639
641
|
renderFooter?: () => React__default.ReactNode;
|
|
640
642
|
rowPadding?: string;
|
|
641
643
|
verticalLines?: boolean;
|
|
644
|
+
verclines?: boolean;
|
|
642
645
|
index?: boolean;
|
|
643
646
|
startIndex?: number;
|
|
644
647
|
isLoading?: boolean;
|
|
@@ -648,7 +651,7 @@ interface SimpleTableProps<TData> {
|
|
|
648
651
|
skeletonCount?: number;
|
|
649
652
|
fixed?: boolean;
|
|
650
653
|
}
|
|
651
|
-
declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
654
|
+
declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines: userVerticalLines, verclines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
652
655
|
|
|
653
656
|
interface SummaryColumn<T> {
|
|
654
657
|
title: React__default.ReactNode;
|
|
@@ -661,8 +664,10 @@ interface SummaryTableProps<T> {
|
|
|
661
664
|
columns: SummaryColumn<T>[];
|
|
662
665
|
data: T[];
|
|
663
666
|
className?: string;
|
|
667
|
+
isLoading?: boolean;
|
|
668
|
+
verclines?: boolean;
|
|
664
669
|
}
|
|
665
|
-
declare function SummaryTable<T>({ title, columns, data, className, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
670
|
+
declare function SummaryTable<T>({ title, columns, data, className, isLoading, verclines, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
666
671
|
|
|
667
672
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
668
673
|
variant?: "primary" | "danger" | "warning" | "success";
|
package/dist/index.d.ts
CHANGED
|
@@ -546,6 +546,7 @@ interface DataTableProps<TData, TValue> {
|
|
|
546
546
|
searchPlaceholder?: string;
|
|
547
547
|
className?: string;
|
|
548
548
|
verticalLines?: boolean;
|
|
549
|
+
verclines?: boolean;
|
|
549
550
|
rowPadding?: string;
|
|
550
551
|
index?: boolean;
|
|
551
552
|
renderSubComponent?: (props: {
|
|
@@ -570,7 +571,7 @@ interface DataTableProps<TData, TValue> {
|
|
|
570
571
|
filterables?: boolean;
|
|
571
572
|
emptyState?: React__default.ReactNode;
|
|
572
573
|
}
|
|
573
|
-
declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
|
|
574
|
+
declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
|
|
574
575
|
defaultExpanded, onChange, selectable, filterables, emptyState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
575
576
|
|
|
576
577
|
declare module "@tanstack/react-table" {
|
|
@@ -604,6 +605,7 @@ interface PostTableProps<TData> {
|
|
|
604
605
|
isLoading?: boolean;
|
|
605
606
|
className?: string;
|
|
606
607
|
verticalLines?: boolean;
|
|
608
|
+
verclines?: boolean;
|
|
607
609
|
rowPadding?: string;
|
|
608
610
|
index?: boolean;
|
|
609
611
|
renderAddButton?: (entryData: Partial<TData>, handleSaveField: () => void, isSaving: boolean) => React__default.ReactNode;
|
|
@@ -618,7 +620,7 @@ interface PostTableProps<TData> {
|
|
|
618
620
|
onEdit?: (row: TData) => void;
|
|
619
621
|
onDelete?: (row: TData) => void;
|
|
620
622
|
}
|
|
621
|
-
declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
|
|
623
|
+
declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
|
|
622
624
|
defaultExpanded, submitLoading, onCancel, onEdit, onDelete, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
623
625
|
|
|
624
626
|
type SimpleTableColumn<TData> = ColumnDef<TData, any> & {
|
|
@@ -639,6 +641,7 @@ interface SimpleTableProps<TData> {
|
|
|
639
641
|
renderFooter?: () => React__default.ReactNode;
|
|
640
642
|
rowPadding?: string;
|
|
641
643
|
verticalLines?: boolean;
|
|
644
|
+
verclines?: boolean;
|
|
642
645
|
index?: boolean;
|
|
643
646
|
startIndex?: number;
|
|
644
647
|
isLoading?: boolean;
|
|
@@ -648,7 +651,7 @@ interface SimpleTableProps<TData> {
|
|
|
648
651
|
skeletonCount?: number;
|
|
649
652
|
fixed?: boolean;
|
|
650
653
|
}
|
|
651
|
-
declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
654
|
+
declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines: userVerticalLines, verclines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
652
655
|
|
|
653
656
|
interface SummaryColumn<T> {
|
|
654
657
|
title: React__default.ReactNode;
|
|
@@ -661,8 +664,10 @@ interface SummaryTableProps<T> {
|
|
|
661
664
|
columns: SummaryColumn<T>[];
|
|
662
665
|
data: T[];
|
|
663
666
|
className?: string;
|
|
667
|
+
isLoading?: boolean;
|
|
668
|
+
verclines?: boolean;
|
|
664
669
|
}
|
|
665
|
-
declare function SummaryTable<T>({ title, columns, data, className, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
670
|
+
declare function SummaryTable<T>({ title, columns, data, className, isLoading, verclines, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
666
671
|
|
|
667
672
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
668
673
|
variant?: "primary" | "danger" | "warning" | "success";
|
package/dist/index.js
CHANGED
|
@@ -3371,7 +3371,8 @@ function DataTable({
|
|
|
3371
3371
|
pageRows,
|
|
3372
3372
|
searchPlaceholder = "Search all columns...",
|
|
3373
3373
|
className = "",
|
|
3374
|
-
verticalLines = false,
|
|
3374
|
+
verticalLines: userVerticalLines = false,
|
|
3375
|
+
verclines = false,
|
|
3375
3376
|
rowPadding = "px-4 py-3",
|
|
3376
3377
|
index = false,
|
|
3377
3378
|
renderSubComponent,
|
|
@@ -3383,6 +3384,7 @@ function DataTable({
|
|
|
3383
3384
|
filterables = true,
|
|
3384
3385
|
emptyState
|
|
3385
3386
|
}) {
|
|
3387
|
+
const verticalLines = userVerticalLines || verclines;
|
|
3386
3388
|
const { theme } = useWarqadConfig();
|
|
3387
3389
|
const primaryColor = theme?.primaryColor;
|
|
3388
3390
|
const [sorting, setSorting] = (0, import_react18.useState)([]);
|
|
@@ -3608,7 +3610,10 @@ function DataTable({
|
|
|
3608
3610
|
className: "w-full text-left border-collapse",
|
|
3609
3611
|
style: { accentColor: primaryColor },
|
|
3610
3612
|
children: [
|
|
3611
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { className:
|
|
3613
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { className: cn(
|
|
3614
|
+
"bg-gray-50/50 dark:bg-zinc-900/50 border-b",
|
|
3615
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
|
|
3616
|
+
), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3612
3617
|
"th",
|
|
3613
3618
|
{
|
|
3614
3619
|
className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
|
|
@@ -3622,7 +3627,10 @@ function DataTable({
|
|
|
3622
3627
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3623
3628
|
"tr",
|
|
3624
3629
|
{
|
|
3625
|
-
className:
|
|
3630
|
+
className: cn(
|
|
3631
|
+
"border-b",
|
|
3632
|
+
verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
|
|
3633
|
+
),
|
|
3626
3634
|
children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3627
3635
|
"td",
|
|
3628
3636
|
{
|
|
@@ -3637,7 +3645,12 @@ function DataTable({
|
|
|
3637
3645
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3638
3646
|
"tr",
|
|
3639
3647
|
{
|
|
3640
|
-
className:
|
|
3648
|
+
className: cn(
|
|
3649
|
+
"border-b transition-colors last:border-b-0",
|
|
3650
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
|
|
3651
|
+
renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
|
|
3652
|
+
"hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
|
|
3653
|
+
),
|
|
3641
3654
|
"data-state": row.getIsSelected() && "selected",
|
|
3642
3655
|
onClick: (e) => {
|
|
3643
3656
|
if (renderSubComponent && hasSubComponent(row.original)) {
|
|
@@ -3782,7 +3795,12 @@ var TableRow = import_react19.default.memo(
|
|
|
3782
3795
|
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3783
3796
|
"tr",
|
|
3784
3797
|
{
|
|
3785
|
-
className:
|
|
3798
|
+
className: cn(
|
|
3799
|
+
"border-b transition-colors last:border-b-0",
|
|
3800
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
|
|
3801
|
+
renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
|
|
3802
|
+
"hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
|
|
3803
|
+
),
|
|
3786
3804
|
"data-state": row.getIsSelected() && "selected",
|
|
3787
3805
|
onClick: (e) => {
|
|
3788
3806
|
if (renderSubComponent && hasSubComponent(row.original)) {
|
|
@@ -3819,7 +3837,8 @@ function PostTable({
|
|
|
3819
3837
|
onChange,
|
|
3820
3838
|
isLoading = false,
|
|
3821
3839
|
className = "",
|
|
3822
|
-
verticalLines = false,
|
|
3840
|
+
verticalLines: userVerticalLines = false,
|
|
3841
|
+
verclines = false,
|
|
3823
3842
|
rowPadding = "px-4 py-3",
|
|
3824
3843
|
index = false,
|
|
3825
3844
|
renderAddButton,
|
|
@@ -3832,6 +3851,7 @@ function PostTable({
|
|
|
3832
3851
|
onEdit,
|
|
3833
3852
|
onDelete
|
|
3834
3853
|
}) {
|
|
3854
|
+
const verticalLines = userVerticalLines || verclines;
|
|
3835
3855
|
const { theme } = useWarqadConfig();
|
|
3836
3856
|
const primaryColor = theme?.primaryColor;
|
|
3837
3857
|
const [sorting, setSorting] = (0, import_react19.useState)([]);
|
|
@@ -4147,7 +4167,10 @@ function PostTable({
|
|
|
4147
4167
|
className: `space-y-4 w-full ${className}`,
|
|
4148
4168
|
style: { "--theme-primary": primaryColor || "#3b82f6" },
|
|
4149
4169
|
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("table", { className: "w-full text-left border-collapse", children: [
|
|
4150
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { className:
|
|
4170
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { className: cn(
|
|
4171
|
+
"bg-gray-50/50 dark:bg-zinc-900/50 border-b",
|
|
4172
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
|
|
4173
|
+
), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4151
4174
|
"th",
|
|
4152
4175
|
{
|
|
4153
4176
|
className: cn(
|
|
@@ -4173,7 +4196,10 @@ function PostTable({
|
|
|
4173
4196
|
isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4174
4197
|
"tr",
|
|
4175
4198
|
{
|
|
4176
|
-
className:
|
|
4199
|
+
className: cn(
|
|
4200
|
+
"border-b",
|
|
4201
|
+
verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
|
|
4202
|
+
),
|
|
4177
4203
|
children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
4178
4204
|
"td",
|
|
4179
4205
|
{
|
|
@@ -4432,7 +4458,8 @@ function SimpleTable({
|
|
|
4432
4458
|
className = "",
|
|
4433
4459
|
renderFooter: componentFooter,
|
|
4434
4460
|
rowPadding = "py-3",
|
|
4435
|
-
verticalLines = false,
|
|
4461
|
+
verticalLines: userVerticalLines = false,
|
|
4462
|
+
verclines = false,
|
|
4436
4463
|
index = false,
|
|
4437
4464
|
startIndex = 0,
|
|
4438
4465
|
isLoading = false,
|
|
@@ -4442,6 +4469,7 @@ function SimpleTable({
|
|
|
4442
4469
|
skeletonCount = 5,
|
|
4443
4470
|
fixed = true
|
|
4444
4471
|
}) {
|
|
4472
|
+
const verticalLines = userVerticalLines || verclines;
|
|
4445
4473
|
const columns = (0, import_react20.useMemo)(() => {
|
|
4446
4474
|
const cols = userColumns.filter((col) => !col.hide).map((col) => ({
|
|
4447
4475
|
...col,
|
|
@@ -4576,7 +4604,9 @@ function SummaryTable({
|
|
|
4576
4604
|
title = "Account overview",
|
|
4577
4605
|
columns,
|
|
4578
4606
|
data,
|
|
4579
|
-
className
|
|
4607
|
+
className,
|
|
4608
|
+
isLoading,
|
|
4609
|
+
verclines = false
|
|
4580
4610
|
}) {
|
|
4581
4611
|
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
4582
4612
|
"div",
|
|
@@ -4591,7 +4621,7 @@ function SummaryTable({
|
|
|
4591
4621
|
title && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-zinc-800/80 bg-white dark:bg-zinc-900", children: [
|
|
4592
4622
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white capitalize flex items-center gap-3", children: [
|
|
4593
4623
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-1.5 h-5 bg-blue-600 dark:bg-blue-500 rounded-full inline-block shadow-sm" }),
|
|
4594
|
-
title
|
|
4624
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-5 w-32 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse" }) : title
|
|
4595
4625
|
] }),
|
|
4596
4626
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { className: "text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors p-1 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
4597
4627
|
"svg",
|
|
@@ -4617,14 +4647,36 @@ function SummaryTable({
|
|
|
4617
4647
|
"th",
|
|
4618
4648
|
{
|
|
4619
4649
|
className: cn(
|
|
4620
|
-
"px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase
|
|
4650
|
+
"px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase",
|
|
4651
|
+
"border-b border-gray-200 dark:border-zinc-800",
|
|
4652
|
+
verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0",
|
|
4621
4653
|
col.className
|
|
4622
4654
|
),
|
|
4623
4655
|
children: col.title
|
|
4624
4656
|
},
|
|
4625
4657
|
col.key || idx
|
|
4626
4658
|
)) }) }),
|
|
4627
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children:
|
|
4659
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children: isLoading ? [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4660
|
+
"tr",
|
|
4661
|
+
{
|
|
4662
|
+
className: cn(
|
|
4663
|
+
"border-b",
|
|
4664
|
+
verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
|
|
4665
|
+
),
|
|
4666
|
+
children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4667
|
+
"td",
|
|
4668
|
+
{
|
|
4669
|
+
className: cn(
|
|
4670
|
+
"px-6 py-4",
|
|
4671
|
+
verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0"
|
|
4672
|
+
),
|
|
4673
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
|
|
4674
|
+
},
|
|
4675
|
+
j
|
|
4676
|
+
))
|
|
4677
|
+
},
|
|
4678
|
+
i
|
|
4679
|
+
)) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center space-y-3", children: [
|
|
4628
4680
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-12 w-12 rounded-full bg-gray-50 dark:bg-zinc-800 flex items-center justify-center text-gray-400 border border-gray-100 dark:border-zinc-700", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
4629
4681
|
"svg",
|
|
4630
4682
|
{
|
|
@@ -4647,7 +4699,10 @@ function SummaryTable({
|
|
|
4647
4699
|
] }) }) }) : data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4648
4700
|
"tr",
|
|
4649
4701
|
{
|
|
4650
|
-
className:
|
|
4702
|
+
className: cn(
|
|
4703
|
+
"group relative transition-all duration-200 last:border-0 hover:bg-blue-50/60 dark:hover:bg-blue-900/10 cursor-pointer border-b",
|
|
4704
|
+
verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
|
|
4705
|
+
),
|
|
4651
4706
|
children: columns.map((col, colIndex) => {
|
|
4652
4707
|
const value = col.render ? col.render(row, rowIndex) : col.key ? row[col.key] : null;
|
|
4653
4708
|
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
@@ -4656,6 +4711,7 @@ function SummaryTable({
|
|
|
4656
4711
|
className: cn(
|
|
4657
4712
|
"px-6 py-4 whitespace-nowrap text-sm font-medium",
|
|
4658
4713
|
"transition-colors",
|
|
4714
|
+
verclines && "border-r border-gray-200 dark:border-zinc-700 last:border-r-0",
|
|
4659
4715
|
col.className
|
|
4660
4716
|
),
|
|
4661
4717
|
children: value
|
package/dist/index.mjs
CHANGED
|
@@ -3251,7 +3251,8 @@ function DataTable({
|
|
|
3251
3251
|
pageRows,
|
|
3252
3252
|
searchPlaceholder = "Search all columns...",
|
|
3253
3253
|
className = "",
|
|
3254
|
-
verticalLines = false,
|
|
3254
|
+
verticalLines: userVerticalLines = false,
|
|
3255
|
+
verclines = false,
|
|
3255
3256
|
rowPadding = "px-4 py-3",
|
|
3256
3257
|
index = false,
|
|
3257
3258
|
renderSubComponent,
|
|
@@ -3263,6 +3264,7 @@ function DataTable({
|
|
|
3263
3264
|
filterables = true,
|
|
3264
3265
|
emptyState
|
|
3265
3266
|
}) {
|
|
3267
|
+
const verticalLines = userVerticalLines || verclines;
|
|
3266
3268
|
const { theme } = useWarqadConfig();
|
|
3267
3269
|
const primaryColor = theme?.primaryColor;
|
|
3268
3270
|
const [sorting, setSorting] = useState17([]);
|
|
@@ -3488,7 +3490,10 @@ function DataTable({
|
|
|
3488
3490
|
className: "w-full text-left border-collapse",
|
|
3489
3491
|
style: { accentColor: primaryColor },
|
|
3490
3492
|
children: [
|
|
3491
|
-
/* @__PURE__ */ jsx25("thead", { className:
|
|
3493
|
+
/* @__PURE__ */ jsx25("thead", { className: cn(
|
|
3494
|
+
"bg-gray-50/50 dark:bg-zinc-900/50 border-b",
|
|
3495
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
|
|
3496
|
+
), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx25("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx25(
|
|
3492
3497
|
"th",
|
|
3493
3498
|
{
|
|
3494
3499
|
className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
|
|
@@ -3502,7 +3507,10 @@ function DataTable({
|
|
|
3502
3507
|
/* @__PURE__ */ jsx25("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ jsx25(
|
|
3503
3508
|
"tr",
|
|
3504
3509
|
{
|
|
3505
|
-
className:
|
|
3510
|
+
className: cn(
|
|
3511
|
+
"border-b",
|
|
3512
|
+
verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
|
|
3513
|
+
),
|
|
3506
3514
|
children: columns.map((_2, j) => /* @__PURE__ */ jsx25(
|
|
3507
3515
|
"td",
|
|
3508
3516
|
{
|
|
@@ -3517,7 +3525,12 @@ function DataTable({
|
|
|
3517
3525
|
/* @__PURE__ */ jsx25(
|
|
3518
3526
|
"tr",
|
|
3519
3527
|
{
|
|
3520
|
-
className:
|
|
3528
|
+
className: cn(
|
|
3529
|
+
"border-b transition-colors last:border-b-0",
|
|
3530
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
|
|
3531
|
+
renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
|
|
3532
|
+
"hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
|
|
3533
|
+
),
|
|
3521
3534
|
"data-state": row.getIsSelected() && "selected",
|
|
3522
3535
|
onClick: (e) => {
|
|
3523
3536
|
if (renderSubComponent && hasSubComponent(row.original)) {
|
|
@@ -3683,7 +3696,12 @@ var TableRow = React11.memo(
|
|
|
3683
3696
|
/* @__PURE__ */ jsx26(
|
|
3684
3697
|
"tr",
|
|
3685
3698
|
{
|
|
3686
|
-
className:
|
|
3699
|
+
className: cn(
|
|
3700
|
+
"border-b transition-colors last:border-b-0",
|
|
3701
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
|
|
3702
|
+
renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
|
|
3703
|
+
"hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
|
|
3704
|
+
),
|
|
3687
3705
|
"data-state": row.getIsSelected() && "selected",
|
|
3688
3706
|
onClick: (e) => {
|
|
3689
3707
|
if (renderSubComponent && hasSubComponent(row.original)) {
|
|
@@ -3720,7 +3738,8 @@ function PostTable({
|
|
|
3720
3738
|
onChange,
|
|
3721
3739
|
isLoading = false,
|
|
3722
3740
|
className = "",
|
|
3723
|
-
verticalLines = false,
|
|
3741
|
+
verticalLines: userVerticalLines = false,
|
|
3742
|
+
verclines = false,
|
|
3724
3743
|
rowPadding = "px-4 py-3",
|
|
3725
3744
|
index = false,
|
|
3726
3745
|
renderAddButton,
|
|
@@ -3733,6 +3752,7 @@ function PostTable({
|
|
|
3733
3752
|
onEdit,
|
|
3734
3753
|
onDelete
|
|
3735
3754
|
}) {
|
|
3755
|
+
const verticalLines = userVerticalLines || verclines;
|
|
3736
3756
|
const { theme } = useWarqadConfig();
|
|
3737
3757
|
const primaryColor = theme?.primaryColor;
|
|
3738
3758
|
const [sorting, setSorting] = useState18([]);
|
|
@@ -4048,7 +4068,10 @@ function PostTable({
|
|
|
4048
4068
|
className: `space-y-4 w-full ${className}`,
|
|
4049
4069
|
style: { "--theme-primary": primaryColor || "#3b82f6" },
|
|
4050
4070
|
children: /* @__PURE__ */ jsx26("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ jsx26("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs21("table", { className: "w-full text-left border-collapse", children: [
|
|
4051
|
-
/* @__PURE__ */ jsx26("thead", { className:
|
|
4071
|
+
/* @__PURE__ */ jsx26("thead", { className: cn(
|
|
4072
|
+
"bg-gray-50/50 dark:bg-zinc-900/50 border-b",
|
|
4073
|
+
verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
|
|
4074
|
+
), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx26("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx26(
|
|
4052
4075
|
"th",
|
|
4053
4076
|
{
|
|
4054
4077
|
className: cn(
|
|
@@ -4074,7 +4097,10 @@ function PostTable({
|
|
|
4074
4097
|
isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx26(
|
|
4075
4098
|
"tr",
|
|
4076
4099
|
{
|
|
4077
|
-
className:
|
|
4100
|
+
className: cn(
|
|
4101
|
+
"border-b",
|
|
4102
|
+
verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
|
|
4103
|
+
),
|
|
4078
4104
|
children: columns.map((col, j) => /* @__PURE__ */ jsx26(
|
|
4079
4105
|
"td",
|
|
4080
4106
|
{
|
|
@@ -4337,7 +4363,8 @@ function SimpleTable({
|
|
|
4337
4363
|
className = "",
|
|
4338
4364
|
renderFooter: componentFooter,
|
|
4339
4365
|
rowPadding = "py-3",
|
|
4340
|
-
verticalLines = false,
|
|
4366
|
+
verticalLines: userVerticalLines = false,
|
|
4367
|
+
verclines = false,
|
|
4341
4368
|
index = false,
|
|
4342
4369
|
startIndex = 0,
|
|
4343
4370
|
isLoading = false,
|
|
@@ -4347,6 +4374,7 @@ function SimpleTable({
|
|
|
4347
4374
|
skeletonCount = 5,
|
|
4348
4375
|
fixed = true
|
|
4349
4376
|
}) {
|
|
4377
|
+
const verticalLines = userVerticalLines || verclines;
|
|
4350
4378
|
const columns = useMemo7(() => {
|
|
4351
4379
|
const cols = userColumns.filter((col) => !col.hide).map((col) => ({
|
|
4352
4380
|
...col,
|
|
@@ -4481,7 +4509,9 @@ function SummaryTable({
|
|
|
4481
4509
|
title = "Account overview",
|
|
4482
4510
|
columns,
|
|
4483
4511
|
data,
|
|
4484
|
-
className
|
|
4512
|
+
className,
|
|
4513
|
+
isLoading,
|
|
4514
|
+
verclines = false
|
|
4485
4515
|
}) {
|
|
4486
4516
|
return /* @__PURE__ */ jsxs23(
|
|
4487
4517
|
"div",
|
|
@@ -4496,7 +4526,7 @@ function SummaryTable({
|
|
|
4496
4526
|
title && /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-zinc-800/80 bg-white dark:bg-zinc-900", children: [
|
|
4497
4527
|
/* @__PURE__ */ jsxs23("h3", { className: "text-lg font-bold text-gray-900 dark:text-white capitalize flex items-center gap-3", children: [
|
|
4498
4528
|
/* @__PURE__ */ jsx28("span", { className: "w-1.5 h-5 bg-blue-600 dark:bg-blue-500 rounded-full inline-block shadow-sm" }),
|
|
4499
|
-
title
|
|
4529
|
+
isLoading ? /* @__PURE__ */ jsx28("div", { className: "h-5 w-32 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse" }) : title
|
|
4500
4530
|
] }),
|
|
4501
4531
|
/* @__PURE__ */ jsx28("button", { className: "text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors p-1 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800", children: /* @__PURE__ */ jsxs23(
|
|
4502
4532
|
"svg",
|
|
@@ -4522,14 +4552,36 @@ function SummaryTable({
|
|
|
4522
4552
|
"th",
|
|
4523
4553
|
{
|
|
4524
4554
|
className: cn(
|
|
4525
|
-
"px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase
|
|
4555
|
+
"px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase",
|
|
4556
|
+
"border-b border-gray-200 dark:border-zinc-800",
|
|
4557
|
+
verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0",
|
|
4526
4558
|
col.className
|
|
4527
4559
|
),
|
|
4528
4560
|
children: col.title
|
|
4529
4561
|
},
|
|
4530
4562
|
col.key || idx
|
|
4531
4563
|
)) }) }),
|
|
4532
|
-
/* @__PURE__ */ jsx28("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children:
|
|
4564
|
+
/* @__PURE__ */ jsx28("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children: isLoading ? [...Array(3)].map((_, i) => /* @__PURE__ */ jsx28(
|
|
4565
|
+
"tr",
|
|
4566
|
+
{
|
|
4567
|
+
className: cn(
|
|
4568
|
+
"border-b",
|
|
4569
|
+
verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
|
|
4570
|
+
),
|
|
4571
|
+
children: columns.map((col, j) => /* @__PURE__ */ jsx28(
|
|
4572
|
+
"td",
|
|
4573
|
+
{
|
|
4574
|
+
className: cn(
|
|
4575
|
+
"px-6 py-4",
|
|
4576
|
+
verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0"
|
|
4577
|
+
),
|
|
4578
|
+
children: /* @__PURE__ */ jsx28("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
|
|
4579
|
+
},
|
|
4580
|
+
j
|
|
4581
|
+
))
|
|
4582
|
+
},
|
|
4583
|
+
i
|
|
4584
|
+
)) : data.length === 0 ? /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center justify-center space-y-3", children: [
|
|
4533
4585
|
/* @__PURE__ */ jsx28("div", { className: "h-12 w-12 rounded-full bg-gray-50 dark:bg-zinc-800 flex items-center justify-center text-gray-400 border border-gray-100 dark:border-zinc-700", children: /* @__PURE__ */ jsxs23(
|
|
4534
4586
|
"svg",
|
|
4535
4587
|
{
|
|
@@ -4552,7 +4604,10 @@ function SummaryTable({
|
|
|
4552
4604
|
] }) }) }) : data.map((row, rowIndex) => /* @__PURE__ */ jsx28(
|
|
4553
4605
|
"tr",
|
|
4554
4606
|
{
|
|
4555
|
-
className:
|
|
4607
|
+
className: cn(
|
|
4608
|
+
"group relative transition-all duration-200 last:border-0 hover:bg-blue-50/60 dark:hover:bg-blue-900/10 cursor-pointer border-b",
|
|
4609
|
+
verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
|
|
4610
|
+
),
|
|
4556
4611
|
children: columns.map((col, colIndex) => {
|
|
4557
4612
|
const value = col.render ? col.render(row, rowIndex) : col.key ? row[col.key] : null;
|
|
4558
4613
|
return /* @__PURE__ */ jsx28(
|
|
@@ -4561,6 +4616,7 @@ function SummaryTable({
|
|
|
4561
4616
|
className: cn(
|
|
4562
4617
|
"px-6 py-4 whitespace-nowrap text-sm font-medium",
|
|
4563
4618
|
"transition-colors",
|
|
4619
|
+
verclines && "border-r border-gray-200 dark:border-zinc-700 last:border-r-0",
|
|
4564
4620
|
col.className
|
|
4565
4621
|
),
|
|
4566
4622
|
children: value
|
package/dist/styles.js
CHANGED
|
@@ -2544,6 +2544,9 @@ select:-webkit-autofill:focus {
|
|
|
2544
2544
|
.last\\:border-b-0:last-child {
|
|
2545
2545
|
border-bottom-width: 0px;
|
|
2546
2546
|
}
|
|
2547
|
+
.last\\:border-r-0:last-child {
|
|
2548
|
+
border-right-width: 0px;
|
|
2549
|
+
}
|
|
2547
2550
|
.focus-within\\:bg-white:focus-within {
|
|
2548
2551
|
--tw-bg-opacity: 1;
|
|
2549
2552
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
package/dist/styles.mjs
CHANGED
|
@@ -2542,6 +2542,9 @@ select:-webkit-autofill:focus {
|
|
|
2542
2542
|
.last\\:border-b-0:last-child {
|
|
2543
2543
|
border-bottom-width: 0px;
|
|
2544
2544
|
}
|
|
2545
|
+
.last\\:border-r-0:last-child {
|
|
2546
|
+
border-right-width: 0px;
|
|
2547
|
+
}
|
|
2545
2548
|
.focus-within\\:bg-white:focus-within {
|
|
2546
2549
|
--tw-bg-opacity: 1;
|
|
2547
2550
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|