@jameskabz/nextcraft-ui 0.6.16 → 0.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/README.md +37 -3
- package/dist/components/craft-button.cjs +64 -4
- package/dist/components/craft-button.cjs.map +1 -1
- package/dist/components/craft-button.d.cts +5 -2
- package/dist/components/craft-button.d.ts +5 -2
- package/dist/components/craft-button.js +65 -5
- package/dist/components/craft-button.js.map +1 -1
- package/dist/components/craft-checkbox.cjs +2 -2
- package/dist/components/craft-checkbox.cjs.map +1 -1
- package/dist/components/craft-checkbox.js +2 -2
- package/dist/components/craft-checkbox.js.map +1 -1
- package/dist/components/craft-create-edit-drawer.cjs +5 -3
- package/dist/components/craft-create-edit-drawer.cjs.map +1 -1
- package/dist/components/craft-create-edit-drawer.js +5 -3
- package/dist/components/craft-create-edit-drawer.js.map +1 -1
- package/dist/components/craft-data-table-header.cjs +74 -0
- package/dist/components/craft-data-table-header.cjs.map +1 -0
- package/dist/components/craft-data-table-header.d.cts +17 -0
- package/dist/components/craft-data-table-header.d.ts +17 -0
- package/dist/components/craft-data-table-header.js +50 -0
- package/dist/components/craft-data-table-header.js.map +1 -0
- package/dist/components/craft-data-table-pagination.cjs +107 -0
- package/dist/components/craft-data-table-pagination.cjs.map +1 -0
- package/dist/components/craft-data-table-pagination.d.cts +25 -0
- package/dist/components/craft-data-table-pagination.d.ts +25 -0
- package/dist/components/craft-data-table-pagination.js +83 -0
- package/dist/components/craft-data-table-pagination.js.map +1 -0
- package/dist/components/craft-data-table.cjs +424 -192
- package/dist/components/craft-data-table.cjs.map +1 -1
- package/dist/components/craft-data-table.d.cts +61 -9
- package/dist/components/craft-data-table.d.ts +61 -9
- package/dist/components/craft-data-table.js +424 -192
- package/dist/components/craft-data-table.js.map +1 -1
- package/dist/components/craft-form-field.cjs +67 -11
- package/dist/components/craft-form-field.cjs.map +1 -1
- package/dist/components/craft-form-field.d.cts +4 -1
- package/dist/components/craft-form-field.d.ts +4 -1
- package/dist/components/craft-form-field.js +57 -11
- package/dist/components/craft-form-field.js.map +1 -1
- package/dist/components/craft-form-modal.cjs +29 -28
- package/dist/components/craft-form-modal.cjs.map +1 -1
- package/dist/components/craft-form-modal.js +29 -28
- package/dist/components/craft-form-modal.js.map +1 -1
- package/dist/components/craft-form.cjs +5 -3
- package/dist/components/craft-form.cjs.map +1 -1
- package/dist/components/craft-form.js +5 -3
- package/dist/components/craft-form.js.map +1 -1
- package/dist/components/craft-icon.cjs +26 -32
- package/dist/components/craft-icon.cjs.map +1 -1
- package/dist/components/craft-icon.d.cts +1 -2
- package/dist/components/craft-icon.d.ts +1 -2
- package/dist/components/craft-icon.js +36 -32
- package/dist/components/craft-icon.js.map +1 -1
- package/dist/components/craft-loader.cjs +195 -0
- package/dist/components/craft-loader.cjs.map +1 -0
- package/dist/components/craft-loader.d.cts +21 -0
- package/dist/components/craft-loader.d.ts +21 -0
- package/dist/components/craft-loader.js +171 -0
- package/dist/components/craft-loader.js.map +1 -0
- package/dist/components/layout/app-template.cjs +2 -3
- package/dist/components/layout/app-template.cjs.map +1 -1
- package/dist/components/layout/app-template.d.cts +1 -2
- package/dist/components/layout/app-template.d.ts +1 -2
- package/dist/components/layout/app-template.js +2 -3
- package/dist/components/layout/app-template.js.map +1 -1
- package/dist/index.cjs +9 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +6 -2
- package/dist/index.js.map +1 -1
- package/dist/styles.css +164 -12
- package/package.json +11 -10
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
|
+
|
|
5
|
+
type CraftDataTableHeaderProps = {
|
|
6
|
+
title?: React.ReactNode;
|
|
7
|
+
description?: React.ReactNode;
|
|
8
|
+
actions?: React.ReactNode;
|
|
9
|
+
filters?: React.ReactNode;
|
|
10
|
+
tone?: ThemeName;
|
|
11
|
+
variant?: "default" | "minimal";
|
|
12
|
+
padding?: "compact" | "normal" | "comfortable";
|
|
13
|
+
className?: string;
|
|
14
|
+
};
|
|
15
|
+
declare function CraftDataTableHeader({ title, description, actions, filters, tone, variant, padding, className, }: CraftDataTableHeaderProps): react_jsx_runtime.JSX.Element | null;
|
|
16
|
+
|
|
17
|
+
export { CraftDataTableHeader, type CraftDataTableHeaderProps };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "../utils/cn";
|
|
4
|
+
const paddingClasses = {
|
|
5
|
+
compact: "px-4 py-3",
|
|
6
|
+
normal: "px-6 py-4",
|
|
7
|
+
comfortable: "px-8 py-5"
|
|
8
|
+
};
|
|
9
|
+
const variantClasses = {
|
|
10
|
+
default: "border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]",
|
|
11
|
+
minimal: "border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent"
|
|
12
|
+
};
|
|
13
|
+
function CraftDataTableHeader({
|
|
14
|
+
title,
|
|
15
|
+
description,
|
|
16
|
+
actions,
|
|
17
|
+
filters,
|
|
18
|
+
tone,
|
|
19
|
+
variant = "default",
|
|
20
|
+
padding = "normal",
|
|
21
|
+
className
|
|
22
|
+
}) {
|
|
23
|
+
if (!title && !description && !actions && !filters) return null;
|
|
24
|
+
return /* @__PURE__ */ jsxs(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
className: cn(
|
|
28
|
+
"flex flex-wrap items-start justify-between gap-4",
|
|
29
|
+
paddingClasses[padding],
|
|
30
|
+
variantClasses[variant],
|
|
31
|
+
className
|
|
32
|
+
),
|
|
33
|
+
"data-nc-theme": tone,
|
|
34
|
+
children: [
|
|
35
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
36
|
+
title ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }) : null,
|
|
37
|
+
description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description }) : null
|
|
38
|
+
] }),
|
|
39
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
40
|
+
filters,
|
|
41
|
+
actions
|
|
42
|
+
] })
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
export {
|
|
48
|
+
CraftDataTableHeader
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=craft-data-table-header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-data-table-header.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDataTableHeaderProps = {\n title?: React.ReactNode;\n description?: React.ReactNode;\n actions?: React.ReactNode;\n filters?: React.ReactNode;\n tone?: ThemeName;\n variant?: \"default\" | \"minimal\";\n padding?: \"compact\" | \"normal\" | \"comfortable\";\n className?: string;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTableHeaderProps[\"padding\"]>, string> = {\n compact: \"px-4 py-3\",\n normal: \"px-6 py-4\",\n comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTableHeaderProps[\"variant\"]>, string> = {\n default:\n \"border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]\",\n minimal: \"border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent\",\n};\n\nexport function CraftDataTableHeader({\n title,\n description,\n actions,\n filters,\n tone,\n variant = \"default\",\n padding = \"normal\",\n className,\n}: CraftDataTableHeaderProps) {\n if (!title && !description && !actions && !filters) return null;\n\n return (\n <div\n className={cn(\n \"flex flex-wrap items-start justify-between gap-4\",\n paddingClasses[padding],\n variantClasses[variant],\n className\n )}\n data-nc-theme={tone}\n >\n <div className=\"space-y-1\">\n {title ? <h3 className=\"text-lg font-semibold\">{title}</h3> : null}\n {description ? (\n <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">{description}</p>\n ) : null}\n </div>\n <div className=\"flex flex-wrap items-center gap-3\">\n {filters}\n {actions}\n </div>\n </div>\n );\n}\n"],"mappings":";AAoDM,SACW,KADX;AAhDN,SAAS,UAAU;AAcnB,MAAM,iBAAoF;AAAA,EACxF,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAoF;AAAA,EACxF,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AACF,GAA8B;AAC5B,MAAI,CAAC,SAAS,CAAC,eAAe,CAAC,WAAW,CAAC,QAAS,QAAO;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,6BAAC,SAAI,WAAU,aACZ;AAAA,kBAAQ,oBAAC,QAAG,WAAU,yBAAyB,iBAAM,IAAQ;AAAA,UAC7D,cACC,oBAAC,OAAE,WAAU,0CAA0C,uBAAY,IACjE;AAAA,WACN;AAAA,QACA,qBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var craft_data_table_pagination_exports = {};
|
|
21
|
+
__export(craft_data_table_pagination_exports, {
|
|
22
|
+
CraftDataTablePagination: () => CraftDataTablePagination
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(craft_data_table_pagination_exports);
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import_cn = require("../utils/cn");
|
|
27
|
+
var import_craft_pagination = require("../components/craft-pagination");
|
|
28
|
+
const paddingClasses = {
|
|
29
|
+
compact: "px-4 py-3",
|
|
30
|
+
normal: "px-6 py-4",
|
|
31
|
+
comfortable: "px-8 py-5"
|
|
32
|
+
};
|
|
33
|
+
const variantClasses = {
|
|
34
|
+
default: "border-t border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]",
|
|
35
|
+
minimal: "border-t border-[rgb(var(--nc-border)/0.2)] bg-transparent"
|
|
36
|
+
};
|
|
37
|
+
function CraftDataTablePagination({
|
|
38
|
+
currentPage,
|
|
39
|
+
totalPages,
|
|
40
|
+
total,
|
|
41
|
+
pageSize,
|
|
42
|
+
selectable,
|
|
43
|
+
selectedCount = 0,
|
|
44
|
+
showPagination = true,
|
|
45
|
+
loading = false,
|
|
46
|
+
disabled = false,
|
|
47
|
+
onPageChange,
|
|
48
|
+
onPageSizeChange,
|
|
49
|
+
variant = "default",
|
|
50
|
+
padding = "normal",
|
|
51
|
+
tone,
|
|
52
|
+
className,
|
|
53
|
+
footer
|
|
54
|
+
}) {
|
|
55
|
+
if (!showPagination && !footer) return null;
|
|
56
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
className: (0, import_cn.cn)(
|
|
60
|
+
"flex flex-wrap items-center justify-between gap-4",
|
|
61
|
+
paddingClasses[padding],
|
|
62
|
+
variantClasses[variant],
|
|
63
|
+
className
|
|
64
|
+
),
|
|
65
|
+
"data-nc-theme": tone,
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-3 text-xs text-[rgb(var(--nc-fg-muted))]", children: [
|
|
68
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
|
|
69
|
+
"Page ",
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[rgb(var(--nc-fg))]", children: currentPage + 1 }),
|
|
71
|
+
" of ",
|
|
72
|
+
totalPages
|
|
73
|
+
] }),
|
|
74
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
|
|
75
|
+
total,
|
|
76
|
+
" rows"
|
|
77
|
+
] }),
|
|
78
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
|
|
79
|
+
selectedCount,
|
|
80
|
+
" selected"
|
|
81
|
+
] }) : null,
|
|
82
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[rgb(var(--nc-fg))]", children: "Loading..." }) : null
|
|
83
|
+
] }),
|
|
84
|
+
footer,
|
|
85
|
+
showPagination && onPageChange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
import_craft_pagination.CraftPagination,
|
|
87
|
+
{
|
|
88
|
+
pageIndex: currentPage,
|
|
89
|
+
pageCount: totalPages,
|
|
90
|
+
onPageChange,
|
|
91
|
+
pageSize,
|
|
92
|
+
onPageSizeChange,
|
|
93
|
+
canPrevious: currentPage > 0 && !disabled,
|
|
94
|
+
canNext: currentPage < totalPages - 1 && !disabled,
|
|
95
|
+
tone,
|
|
96
|
+
className: disabled ? "opacity-60" : void 0
|
|
97
|
+
}
|
|
98
|
+
) : null
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
104
|
+
0 && (module.exports = {
|
|
105
|
+
CraftDataTablePagination
|
|
106
|
+
});
|
|
107
|
+
//# sourceMappingURL=craft-data-table-pagination.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-data-table-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftPagination } from \"@/components/craft-pagination\";\n\nexport type CraftDataTablePaginationProps = {\n currentPage: number;\n totalPages: number;\n total: number;\n pageSize: number;\n selectable?: boolean;\n selectedCount?: number;\n showPagination?: boolean;\n loading?: boolean;\n disabled?: boolean;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (size: number) => void;\n variant?: \"default\" | \"minimal\";\n padding?: \"compact\" | \"normal\" | \"comfortable\";\n tone?: ThemeName;\n className?: string;\n footer?: React.ReactNode;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTablePaginationProps[\"padding\"]>, string> = {\n compact: \"px-4 py-3\",\n normal: \"px-6 py-4\",\n comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTablePaginationProps[\"variant\"]>, string> = {\n default:\n \"border-t border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]\",\n minimal: \"border-t border-[rgb(var(--nc-border)/0.2)] bg-transparent\",\n};\n\nexport function CraftDataTablePagination({\n currentPage,\n totalPages,\n total,\n pageSize,\n selectable,\n selectedCount = 0,\n showPagination = true,\n loading = false,\n disabled = false,\n onPageChange,\n onPageSizeChange,\n variant = \"default\",\n padding = \"normal\",\n tone,\n className,\n footer,\n}: CraftDataTablePaginationProps) {\n if (!showPagination && !footer) return null;\n\n return (\n <div\n className={cn(\n \"flex flex-wrap items-center justify-between gap-4\",\n paddingClasses[padding],\n variantClasses[variant],\n className\n )}\n data-nc-theme={tone}\n >\n <div className=\"flex flex-wrap items-center gap-3 text-xs text-[rgb(var(--nc-fg-muted))]\">\n <span>\n Page <span className=\"text-[rgb(var(--nc-fg))]\">{currentPage + 1}</span> of {totalPages}\n </span>\n <span>\n {total} rows\n </span>\n {selectable ? (\n <span>\n {selectedCount} selected\n </span>\n ) : null}\n {loading ? <span className=\"text-[rgb(var(--nc-fg))]\">Loading...</span> : null}\n </div>\n {footer}\n {showPagination && onPageChange ? (\n <CraftPagination\n pageIndex={currentPage}\n pageCount={totalPages}\n onPageChange={onPageChange}\n pageSize={pageSize}\n onPageSizeChange={onPageSizeChange}\n canPrevious={currentPage > 0 && !disabled}\n canNext={currentPage < totalPages - 1 && !disabled}\n tone={tone}\n className={disabled ? \"opacity-60\" : undefined}\n />\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEQ;AAlER,gBAAmB;AAEnB,8BAAgC;AAqBhC,MAAM,iBAAwF;AAAA,EAC5F,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAwF;AAAA,EAC5F,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAkC;AAChC,MAAI,CAAC,kBAAkB,CAAC,OAAQ,QAAO;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,qDAAC,SAAI,WAAU,4EACb;AAAA,uDAAC,UAAK;AAAA;AAAA,YACC,4CAAC,UAAK,WAAU,4BAA4B,wBAAc,GAAE;AAAA,YAAO;AAAA,YAAK;AAAA,aAC/E;AAAA,UACA,6CAAC,UACE;AAAA;AAAA,YAAM;AAAA,aACT;AAAA,UACC,aACC,6CAAC,UACE;AAAA;AAAA,YAAc;AAAA,aACjB,IACE;AAAA,UACH,UAAU,4CAAC,UAAK,WAAU,4BAA2B,wBAAU,IAAU;AAAA,WAC5E;AAAA,QACC;AAAA,QACA,kBAAkB,eACjB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,WAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAa,cAAc,KAAK,CAAC;AAAA,YACjC,SAAS,cAAc,aAAa,KAAK,CAAC;AAAA,YAC1C;AAAA,YACA,WAAW,WAAW,eAAe;AAAA;AAAA,QACvC,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
|
+
|
|
5
|
+
type CraftDataTablePaginationProps = {
|
|
6
|
+
currentPage: number;
|
|
7
|
+
totalPages: number;
|
|
8
|
+
total: number;
|
|
9
|
+
pageSize: number;
|
|
10
|
+
selectable?: boolean;
|
|
11
|
+
selectedCount?: number;
|
|
12
|
+
showPagination?: boolean;
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
onPageChange?: (page: number) => void;
|
|
16
|
+
onPageSizeChange?: (size: number) => void;
|
|
17
|
+
variant?: "default" | "minimal";
|
|
18
|
+
padding?: "compact" | "normal" | "comfortable";
|
|
19
|
+
tone?: ThemeName;
|
|
20
|
+
className?: string;
|
|
21
|
+
footer?: React.ReactNode;
|
|
22
|
+
};
|
|
23
|
+
declare function CraftDataTablePagination({ currentPage, totalPages, total, pageSize, selectable, selectedCount, showPagination, loading, disabled, onPageChange, onPageSizeChange, variant, padding, tone, className, footer, }: CraftDataTablePaginationProps): react_jsx_runtime.JSX.Element | null;
|
|
24
|
+
|
|
25
|
+
export { CraftDataTablePagination, type CraftDataTablePaginationProps };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.js';
|
|
4
|
+
|
|
5
|
+
type CraftDataTablePaginationProps = {
|
|
6
|
+
currentPage: number;
|
|
7
|
+
totalPages: number;
|
|
8
|
+
total: number;
|
|
9
|
+
pageSize: number;
|
|
10
|
+
selectable?: boolean;
|
|
11
|
+
selectedCount?: number;
|
|
12
|
+
showPagination?: boolean;
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
onPageChange?: (page: number) => void;
|
|
16
|
+
onPageSizeChange?: (size: number) => void;
|
|
17
|
+
variant?: "default" | "minimal";
|
|
18
|
+
padding?: "compact" | "normal" | "comfortable";
|
|
19
|
+
tone?: ThemeName;
|
|
20
|
+
className?: string;
|
|
21
|
+
footer?: React.ReactNode;
|
|
22
|
+
};
|
|
23
|
+
declare function CraftDataTablePagination({ currentPage, totalPages, total, pageSize, selectable, selectedCount, showPagination, loading, disabled, onPageChange, onPageSizeChange, variant, padding, tone, className, footer, }: CraftDataTablePaginationProps): react_jsx_runtime.JSX.Element | null;
|
|
24
|
+
|
|
25
|
+
export { CraftDataTablePagination, type CraftDataTablePaginationProps };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "../utils/cn";
|
|
4
|
+
import { CraftPagination } from "../components/craft-pagination";
|
|
5
|
+
const paddingClasses = {
|
|
6
|
+
compact: "px-4 py-3",
|
|
7
|
+
normal: "px-6 py-4",
|
|
8
|
+
comfortable: "px-8 py-5"
|
|
9
|
+
};
|
|
10
|
+
const variantClasses = {
|
|
11
|
+
default: "border-t border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]",
|
|
12
|
+
minimal: "border-t border-[rgb(var(--nc-border)/0.2)] bg-transparent"
|
|
13
|
+
};
|
|
14
|
+
function CraftDataTablePagination({
|
|
15
|
+
currentPage,
|
|
16
|
+
totalPages,
|
|
17
|
+
total,
|
|
18
|
+
pageSize,
|
|
19
|
+
selectable,
|
|
20
|
+
selectedCount = 0,
|
|
21
|
+
showPagination = true,
|
|
22
|
+
loading = false,
|
|
23
|
+
disabled = false,
|
|
24
|
+
onPageChange,
|
|
25
|
+
onPageSizeChange,
|
|
26
|
+
variant = "default",
|
|
27
|
+
padding = "normal",
|
|
28
|
+
tone,
|
|
29
|
+
className,
|
|
30
|
+
footer
|
|
31
|
+
}) {
|
|
32
|
+
if (!showPagination && !footer) return null;
|
|
33
|
+
return /* @__PURE__ */ jsxs(
|
|
34
|
+
"div",
|
|
35
|
+
{
|
|
36
|
+
className: cn(
|
|
37
|
+
"flex flex-wrap items-center justify-between gap-4",
|
|
38
|
+
paddingClasses[padding],
|
|
39
|
+
variantClasses[variant],
|
|
40
|
+
className
|
|
41
|
+
),
|
|
42
|
+
"data-nc-theme": tone,
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-[rgb(var(--nc-fg-muted))]", children: [
|
|
45
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
46
|
+
"Page ",
|
|
47
|
+
/* @__PURE__ */ jsx("span", { className: "text-[rgb(var(--nc-fg))]", children: currentPage + 1 }),
|
|
48
|
+
" of ",
|
|
49
|
+
totalPages
|
|
50
|
+
] }),
|
|
51
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
52
|
+
total,
|
|
53
|
+
" rows"
|
|
54
|
+
] }),
|
|
55
|
+
selectable ? /* @__PURE__ */ jsxs("span", { children: [
|
|
56
|
+
selectedCount,
|
|
57
|
+
" selected"
|
|
58
|
+
] }) : null,
|
|
59
|
+
loading ? /* @__PURE__ */ jsx("span", { className: "text-[rgb(var(--nc-fg))]", children: "Loading..." }) : null
|
|
60
|
+
] }),
|
|
61
|
+
footer,
|
|
62
|
+
showPagination && onPageChange ? /* @__PURE__ */ jsx(
|
|
63
|
+
CraftPagination,
|
|
64
|
+
{
|
|
65
|
+
pageIndex: currentPage,
|
|
66
|
+
pageCount: totalPages,
|
|
67
|
+
onPageChange,
|
|
68
|
+
pageSize,
|
|
69
|
+
onPageSizeChange,
|
|
70
|
+
canPrevious: currentPage > 0 && !disabled,
|
|
71
|
+
canNext: currentPage < totalPages - 1 && !disabled,
|
|
72
|
+
tone,
|
|
73
|
+
className: disabled ? "opacity-60" : void 0
|
|
74
|
+
}
|
|
75
|
+
) : null
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
export {
|
|
81
|
+
CraftDataTablePagination
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=craft-data-table-pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-data-table-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftPagination } from \"@/components/craft-pagination\";\n\nexport type CraftDataTablePaginationProps = {\n currentPage: number;\n totalPages: number;\n total: number;\n pageSize: number;\n selectable?: boolean;\n selectedCount?: number;\n showPagination?: boolean;\n loading?: boolean;\n disabled?: boolean;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (size: number) => void;\n variant?: \"default\" | \"minimal\";\n padding?: \"compact\" | \"normal\" | \"comfortable\";\n tone?: ThemeName;\n className?: string;\n footer?: React.ReactNode;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTablePaginationProps[\"padding\"]>, string> = {\n compact: \"px-4 py-3\",\n normal: \"px-6 py-4\",\n comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTablePaginationProps[\"variant\"]>, string> = {\n default:\n \"border-t border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]\",\n minimal: \"border-t border-[rgb(var(--nc-border)/0.2)] bg-transparent\",\n};\n\nexport function CraftDataTablePagination({\n currentPage,\n totalPages,\n total,\n pageSize,\n selectable,\n selectedCount = 0,\n showPagination = true,\n loading = false,\n disabled = false,\n onPageChange,\n onPageSizeChange,\n variant = \"default\",\n padding = \"normal\",\n tone,\n className,\n footer,\n}: CraftDataTablePaginationProps) {\n if (!showPagination && !footer) return null;\n\n return (\n <div\n className={cn(\n \"flex flex-wrap items-center justify-between gap-4\",\n paddingClasses[padding],\n variantClasses[variant],\n className\n )}\n data-nc-theme={tone}\n >\n <div className=\"flex flex-wrap items-center gap-3 text-xs text-[rgb(var(--nc-fg-muted))]\">\n <span>\n Page <span className=\"text-[rgb(var(--nc-fg))]\">{currentPage + 1}</span> of {totalPages}\n </span>\n <span>\n {total} rows\n </span>\n {selectable ? (\n <span>\n {selectedCount} selected\n </span>\n ) : null}\n {loading ? <span className=\"text-[rgb(var(--nc-fg))]\">Loading...</span> : null}\n </div>\n {footer}\n {showPagination && onPageChange ? (\n <CraftPagination\n pageIndex={currentPage}\n pageCount={totalPages}\n onPageChange={onPageChange}\n pageSize={pageSize}\n onPageSizeChange={onPageSizeChange}\n canPrevious={currentPage > 0 && !disabled}\n canNext={currentPage < totalPages - 1 && !disabled}\n tone={tone}\n className={disabled ? \"opacity-60\" : undefined}\n />\n ) : null}\n </div>\n );\n}\n"],"mappings":";AAsEQ,SACO,KADP;AAlER,SAAS,UAAU;AAEnB,SAAS,uBAAuB;AAqBhC,MAAM,iBAAwF;AAAA,EAC5F,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAwF;AAAA,EAC5F,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAkC;AAChC,MAAI,CAAC,kBAAkB,CAAC,OAAQ,QAAO;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,6BAAC,SAAI,WAAU,4EACb;AAAA,+BAAC,UAAK;AAAA;AAAA,YACC,oBAAC,UAAK,WAAU,4BAA4B,wBAAc,GAAE;AAAA,YAAO;AAAA,YAAK;AAAA,aAC/E;AAAA,UACA,qBAAC,UACE;AAAA;AAAA,YAAM;AAAA,aACT;AAAA,UACC,aACC,qBAAC,UACE;AAAA;AAAA,YAAc;AAAA,aACjB,IACE;AAAA,UACH,UAAU,oBAAC,UAAK,WAAU,4BAA2B,wBAAU,IAAU;AAAA,WAC5E;AAAA,QACC;AAAA,QACA,kBAAkB,eACjB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,WAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAa,cAAc,KAAK,CAAC;AAAA,YACjC,SAAS,cAAc,aAAa,KAAK,CAAC;AAAA,YAC1C;AAAA,YACA,WAAW,WAAW,eAAe;AAAA;AAAA,QACvC,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}
|