@cryptlex/web-components 3.6.1 → 3.7.1
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/data-table/table-commons.es.js +3 -2
- package/dist/components/data-table/table-commons.es.js.map +1 -1
- package/dist/components/data-table/table-content.es.js +42 -39
- package/dist/components/data-table/table-content.es.js.map +1 -1
- package/dist/components/inputs/checkbox.es.js +25 -20
- package/dist/components/inputs/checkbox.es.js.map +1 -1
- package/dist/index.es.d.ts +2 -1
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ const t = r(), i = [
|
|
|
7
7
|
header: ({ table: e }) => /* @__PURE__ */ c(
|
|
8
8
|
l,
|
|
9
9
|
{
|
|
10
|
+
indeterminate: e.getIsSomeRowsSelected() && !e.getIsAllPageRowsSelected(),
|
|
10
11
|
checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(),
|
|
11
12
|
onChange: () => e.toggleAllPageRowsSelected(),
|
|
12
13
|
"aria-label": "Select all"
|
|
@@ -27,7 +28,7 @@ const t = r(), i = [
|
|
|
27
28
|
t.accessor("id", {
|
|
28
29
|
header: () => "ID"
|
|
29
30
|
})
|
|
30
|
-
],
|
|
31
|
+
], S = [
|
|
31
32
|
t.accessor("createdAt", {
|
|
32
33
|
header: () => "Creation Date",
|
|
33
34
|
cell: ({ row: e }) => {
|
|
@@ -47,7 +48,7 @@ const t = r(), i = [
|
|
|
47
48
|
];
|
|
48
49
|
export {
|
|
49
50
|
i as TABLE_CHECK_BOX_COLUMN,
|
|
50
|
-
|
|
51
|
+
S as TABLE_DEFAULT_DATE_COLUMNS,
|
|
51
52
|
m as TABLE_ID_COLUMN
|
|
52
53
|
};
|
|
53
54
|
//# sourceMappingURL=table-commons.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-commons.es.js","sources":["../../../lib/components/data-table/table-commons.tsx"],"sourcesContent":["import { FormatDate } from \"@/components/data-table/table-utils/index\";\nimport { Checkbox } from \"@/components/inputs\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\n\nconst cH = createColumnHelper<any>();\nexport const TABLE_CHECK_BOX_COLUMN = [\n\tcH.accessor(\"checkbox\", {\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()\n\t\t\t\t}\n\t\t\t\tonChange={() => table.toggleAllPageRowsSelected()}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={row.getIsSelected()}\n\t\t\t\tonChange={() => row.toggleSelected()}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t\tenableSorting: false,\n\t\tenableHiding: false,\n\t}),\n];\n\nexport const TABLE_ID_COLUMN = [\n\tcH.accessor(\"id\", {\n\t\theader: () => \"ID\",\n\t}),\n];\nexport const TABLE_DEFAULT_DATE_COLUMNS = [\n\tcH.accessor(\"createdAt\", {\n\t\theader: () => \"Creation Date\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n\tcH.accessor(\"updatedAt\", {\n\t\theader: () => \"Last Updated\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n];\n"],"names":["cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","FormatDate"],"mappings":";;;;AAIA,MAAMA,IAAKC,EAAA,GACEC,IAAyB;AAAA,EACrCF,EAAG,SAAS,YAAY;AAAA,IACvB,QAAQ,CAAC,EAAE,OAAAG,EAAA,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,
|
|
1
|
+
{"version":3,"file":"table-commons.es.js","sources":["../../../lib/components/data-table/table-commons.tsx"],"sourcesContent":["import { FormatDate } from \"@/components/data-table/table-utils/index\";\nimport { Checkbox } from \"@/components/inputs\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\n\nconst cH = createColumnHelper<any>();\nexport const TABLE_CHECK_BOX_COLUMN = [\n\tcH.accessor(\"checkbox\", {\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tindeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n\t\t\t\tchecked={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()\n\t\t\t\t}\n\t\t\t\tonChange={() => table.toggleAllPageRowsSelected()}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={row.getIsSelected()}\n\t\t\t\tonChange={() => row.toggleSelected()}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t\tenableSorting: false,\n\t\tenableHiding: false,\n\t}),\n];\n\nexport const TABLE_ID_COLUMN = [\n\tcH.accessor(\"id\", {\n\t\theader: () => \"ID\",\n\t}),\n];\nexport const TABLE_DEFAULT_DATE_COLUMNS = [\n\tcH.accessor(\"createdAt\", {\n\t\theader: () => \"Creation Date\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n\tcH.accessor(\"updatedAt\", {\n\t\theader: () => \"Last Updated\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n];\n"],"names":["cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","FormatDate"],"mappings":";;;;AAIA,MAAMA,IAAKC,EAAA,GACEC,IAAyB;AAAA,EACrCF,EAAG,SAAS,YAAY;AAAA,IACvB,QAAQ,CAAC,EAAE,OAAAG,EAAA,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,eAAeF,EAAM,sBAAA,KAA2B,CAACA,EAAM,yBAAA;AAAA,QACvD,SACCA,EAAM,8BAA8BA,EAAM,0BAAA;AAAA,QAE3C,UAAU,MAAMA,EAAM,0BAAA;AAAA,QACtB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAIb,MAAM,CAAC,EAAE,KAAAG,EAAA,MACR,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAASC,EAAI,cAAA;AAAA,QACb,UAAU,MAAMA,EAAI,eAAA;AAAA,QACpB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,eAAe;AAAA,IACf,cAAc;AAAA,EAAA,CACd;AACF,GAEaC,IAAkB;AAAA,EAC9BP,EAAG,SAAS,MAAM;AAAA,IACjB,QAAQ,MAAM;AAAA,EAAA,CACd;AACF,GACaQ,IAA6B;AAAA,EACzCR,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AAAA,EACDT,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AACF;"}
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as s, jsx as e, Fragment as c } from "react/jsx-runtime";
|
|
2
2
|
import { ACTIONS_COLUMN_ID as p } from "./data-table.es.js";
|
|
3
|
-
import { Table as
|
|
3
|
+
import { Table as w, TableHeader as b, TableRow as u, TableHead as x, TableBody as N, TableCell as v } from "../ui/table.es.js";
|
|
4
4
|
import { cn as h } from "../../utils/index.es.js";
|
|
5
5
|
import { flexRender as f } from "@tanstack/react-table";
|
|
6
|
-
import { Info as
|
|
7
|
-
import { useCallback as
|
|
8
|
-
import { Loader as
|
|
6
|
+
import { Info as C, ArrowDownNarrowWide as T, ArrowDownWideNarrow as y, ArrowUpDown as k } from "lucide-react";
|
|
7
|
+
import { useCallback as z } from "react";
|
|
8
|
+
import { Loader as D } from "../ui/loader.es.js";
|
|
9
9
|
import { Button as I } from "../ui/button.es.js";
|
|
10
10
|
const g = ({
|
|
11
11
|
children: a,
|
|
12
12
|
className: l
|
|
13
|
-
}) => /* @__PURE__ */ e(
|
|
13
|
+
}) => /* @__PURE__ */ e("div", { className: "relative h-full w-0", children: /* @__PURE__ */ e(
|
|
14
14
|
"div",
|
|
15
15
|
{
|
|
16
16
|
className: h(
|
|
17
|
-
"absolute top-0 bg-card z-20
|
|
17
|
+
"absolute top-0 bg-card z-20 size-full flex items-center justify-center",
|
|
18
18
|
l
|
|
19
19
|
),
|
|
20
20
|
children: a
|
|
21
21
|
}
|
|
22
|
-
);
|
|
22
|
+
) });
|
|
23
23
|
function F({
|
|
24
24
|
className: a,
|
|
25
25
|
getHeaderGroups: l,
|
|
26
|
-
getRowModel:
|
|
27
|
-
query:
|
|
26
|
+
getRowModel: o,
|
|
27
|
+
query: n
|
|
28
28
|
}) {
|
|
29
29
|
var m;
|
|
30
|
-
const i =
|
|
31
|
-
return /* @__PURE__ */
|
|
32
|
-
i() && /* @__PURE__ */ e(g, { className: "cursor-wait", children: /* @__PURE__ */ e(
|
|
33
|
-
!i() &&
|
|
34
|
-
/* @__PURE__ */ e(g, { className: "cursor-not-allowed", children: !
|
|
35
|
-
/* @__PURE__ */ e(
|
|
30
|
+
const i = z(() => n.isLoading, [n]);
|
|
31
|
+
return /* @__PURE__ */ s(w, { className: h("size-full relative min-h-table", a), children: [
|
|
32
|
+
i() && /* @__PURE__ */ e(g, { className: "cursor-wait", children: /* @__PURE__ */ e(D, {}) }),
|
|
33
|
+
!i() && o().rows.length === 0 && // Empty table
|
|
34
|
+
/* @__PURE__ */ e(g, { className: "cursor-not-allowed", children: !n.isFetching && (n.isError ? /* @__PURE__ */ s("span", { className: "flex gap-3 justify-center items-center", children: [
|
|
35
|
+
/* @__PURE__ */ e(C, {}),
|
|
36
36
|
/* @__PURE__ */ e("span", { children: "You don't have the required permissions. Please contact your admin." })
|
|
37
|
-
] }) : (m =
|
|
38
|
-
!i() && /* @__PURE__ */
|
|
39
|
-
/* @__PURE__ */ e(
|
|
37
|
+
] }) : (m = n.data) != null && m.data ? /* @__PURE__ */ e(c, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(c, { children: "No results found." })) }),
|
|
38
|
+
!i() && o().rows.length !== 0 && /* @__PURE__ */ s(c, { children: [
|
|
39
|
+
/* @__PURE__ */ e(b, { className: "sticky top-0 z-10", children: l().map((r) => /* @__PURE__ */ e(u, { children: r.headers.map((t) => /* @__PURE__ */ e(
|
|
40
40
|
x,
|
|
41
41
|
{
|
|
42
42
|
className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${t.id === p ? "sticky right-0 z-50 text-center" : ""}`,
|
|
43
|
-
children: /* @__PURE__ */
|
|
43
|
+
children: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1", children: [
|
|
44
44
|
/* @__PURE__ */ e("span", { children: t.isPlaceholder ? null : f(
|
|
45
45
|
t.column.columnDef.header,
|
|
46
46
|
t.getContext()
|
|
@@ -53,7 +53,7 @@ function F({
|
|
|
53
53
|
onClick: t.column.getToggleSortingHandler(),
|
|
54
54
|
icon: () => {
|
|
55
55
|
const d = t.column.getIsSorted();
|
|
56
|
-
return d === "asc" ?
|
|
56
|
+
return d === "asc" ? T : d === "desc" ? y : k;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
)
|
|
@@ -61,27 +61,30 @@ function F({
|
|
|
61
61
|
},
|
|
62
62
|
t.id
|
|
63
63
|
)) }, r.id)) }),
|
|
64
|
-
/* @__PURE__ */ e(N, { className: "flex-1 overflow-y-auto
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
/* @__PURE__ */ e(N, { className: "flex-1 overflow-y-auto relative", children: o().rows.length !== 0 && o().rows.map((r) => (
|
|
65
|
+
// TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform
|
|
66
|
+
/* @__PURE__ */ e(
|
|
67
|
+
u,
|
|
68
|
+
{
|
|
69
|
+
className: "transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
|
|
70
|
+
"data-state": r.getIsSelected() && "selected",
|
|
71
|
+
children: r.getVisibleCells().map((t) => /* @__PURE__ */ e(
|
|
72
|
+
v,
|
|
73
|
+
{
|
|
74
|
+
className: `
|
|
73
75
|
px-4 py-2 text-left text-sm whitespace-nowrap
|
|
74
76
|
${t.column.id === p ? "sticky right-0 w-20 bg-card" : ""}
|
|
75
77
|
`,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
78
|
+
children: f(
|
|
79
|
+
t.column.columnDef.cell,
|
|
80
|
+
t.getContext()
|
|
81
|
+
)
|
|
82
|
+
},
|
|
83
|
+
t.id
|
|
84
|
+
))
|
|
85
|
+
},
|
|
86
|
+
r.id
|
|
87
|
+
)
|
|
85
88
|
)) })
|
|
86
89
|
] })
|
|
87
90
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button, Loader } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/utils\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown,\n\tInfo,\n} from \"lucide-react\";\nimport { useCallback } from \"react\";\n\nconst TableOverlay = ({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"absolute top-0 bg-card z-20
|
|
1
|
+
{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button, Loader } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/utils\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown,\n\tInfo,\n} from \"lucide-react\";\nimport { useCallback } from \"react\";\n\nconst TableOverlay = ({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) => (\n\t<div className=\"relative h-full w-0\">\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 bg-card z-20 size-full flex items-center justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t</div>\n\n);\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n\tquery,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n\tquery: UseQueryResult<any, unknown>;\n}) {\n\tconst isLoading = useCallback(() => {\n\t\treturn query.isLoading;\n\t}, [query]);\n\n\treturn (\n\t\t<TableComponent className={cn(\"size-full relative min-h-table\", className)}>\n\t\t\t{/* Table overlay with loader */}\n\t\t\t{isLoading() && (\n\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t<Loader />\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{/* Table overlay for empty table */}\n\t\t\t{!isLoading() && getRowModel().rows.length === 0 && (\n\t\t\t\t// Empty table\n\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t{/* TODO Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t))}\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{!isLoading() && getRowModel().rows.length !== 0 && (\n\t\t\t\t<>\n\t\t\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t// TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform\n\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\tclassName=\"transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\tclassName={`\n px-4 py-2 text-left text-sm whitespace-nowrap\n ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t\t\t}\n `}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableOverlay","children","className","jsx","cn","TableContent","getHeaderGroups","getRowModel","query","isLoading","useCallback","TableComponent","Loader","jsxs","Info","_a","Fragment","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":"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"}
|
|
@@ -1,24 +1,29 @@
|
|
|
1
|
-
import { jsx as o,
|
|
1
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
2
2
|
import { cn as t } from "../../utils/index.es.js";
|
|
3
|
-
import { useFieldContext as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
import { useFieldContext as a } from "../../utils/form-context.es.js";
|
|
4
|
+
import { CircleDashed as l, Check as c } from "lucide-react";
|
|
5
|
+
function u({ className: n, checked: e, indeterminate: i, ...r }) {
|
|
6
|
+
return /* @__PURE__ */ s("div", { className: "relative", children: [
|
|
7
|
+
i && /* @__PURE__ */ o(l, { className: "pointer-events-none absolute size-icon top-2 left-2" }),
|
|
8
|
+
e && !i && /* @__PURE__ */ o(c, { className: "pointer-events-none absolute size-icon top-2 left-2" }),
|
|
9
|
+
/* @__PURE__ */ o(
|
|
10
|
+
"input",
|
|
11
|
+
{
|
|
12
|
+
checked: e,
|
|
13
|
+
type: "checkbox",
|
|
14
|
+
className: t(
|
|
15
|
+
"appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
16
|
+
n
|
|
17
|
+
),
|
|
18
|
+
...r
|
|
19
|
+
}
|
|
20
|
+
)
|
|
21
|
+
] });
|
|
17
22
|
}
|
|
18
|
-
function
|
|
19
|
-
const e =
|
|
23
|
+
function h({ ...n }) {
|
|
24
|
+
const e = a();
|
|
20
25
|
return /* @__PURE__ */ o(
|
|
21
|
-
|
|
26
|
+
u,
|
|
22
27
|
{
|
|
23
28
|
checked: e.state.value,
|
|
24
29
|
onChange: () => e.handleChange(!e.state.value),
|
|
@@ -28,7 +33,7 @@ function s({ ...n }) {
|
|
|
28
33
|
);
|
|
29
34
|
}
|
|
30
35
|
export {
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
u as Checkbox,
|
|
37
|
+
h as TfCheckbox
|
|
33
38
|
};
|
|
34
39
|
//# sourceMappingURL=checkbox.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport type * as React from \"react\";\n\nexport interface CheckboxProps\n\textends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> { }\n\nexport function Checkbox({ className, checked, ...props }: CheckboxProps) {\n\treturn (\n\t\t
|
|
1
|
+
{"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport { Check, CircleDashed } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport interface CheckboxProps\n\textends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> {\n\tindeterminate?: boolean\n}\n\nexport function Checkbox({ className, checked, indeterminate, ...props }: CheckboxProps) {\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t{indeterminate && <CircleDashed className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t{checked && !indeterminate && <Check className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t<input\n\t\t\t\tchecked={checked}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\n\t\t</div>\n\t);\n}\n\nexport interface TfCheckboxProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof Checkbox>,\n\t\t\"onChange\" | \"onBlur\" | \"checked\"\n\t> { }\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n\tconst field = useFieldContext<boolean>();\n\n\treturn (\n\t\t<Checkbox\n\t\t\tchecked={field.state.value}\n\t\t\tonChange={() => field.handleChange(!field.state.value)}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["Checkbox","className","checked","indeterminate","props","jsxs","jsx","CircleDashed","Check","cn","TfCheckbox","field","useFieldContext"],"mappings":";;;;AAUO,SAASA,EAAS,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,KAAwB;AACxF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAF,KAAiB,gBAAAG,EAACC,GAAA,EAAa,WAAU,sDAAA,CAAsD;AAAA,IAC/FL,KAAW,CAACC,KAAiB,gBAAAG,EAACE,GAAA,EAAM,WAAU,uDAAsD;AAAA,IACrG,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,SAAAJ;AAAA,QACA,MAAK;AAAA,QACL,WAAWO;AAAA,UACV;AAAA,UACAR;AAAA,QAAA;AAAA,QAEA,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GAED;AAEF;AAOO,SAASM,EAAW,EAAE,GAAGN,KAA0B;AACzD,QAAMO,IAAQC,EAAA;AAEd,SACC,gBAAAN;AAAA,IAACN;AAAA,IAAA;AAAA,MACA,SAASW,EAAM,MAAM;AAAA,MACrB,UAAU,MAAMA,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK;AAAA,MACrD,QAAQA,EAAM;AAAA,MACb,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
package/dist/index.es.d.ts
CHANGED
|
@@ -125,9 +125,10 @@ export declare function CardHeader({ className, ...props }: React_2.ComponentPro
|
|
|
125
125
|
|
|
126
126
|
export declare function CardTitle({ className, ...props }: React_2.ComponentProps<"h3">): JSX.Element;
|
|
127
127
|
|
|
128
|
-
export declare function Checkbox({ className, checked, ...props }: CheckboxProps): JSX.Element;
|
|
128
|
+
export declare function Checkbox({ className, checked, indeterminate, ...props }: CheckboxProps): JSX.Element;
|
|
129
129
|
|
|
130
130
|
export declare interface CheckboxProps extends Omit<React_2.ComponentProps<"input">, "type" | "value"> {
|
|
131
|
+
indeterminate?: boolean;
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
declare type Client = ReturnType<typeof default_2<paths>>;
|