lkd-web-kit 0.10.0 → 0.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/codex/skills/create-modal-component/SKILL.md +168 -0
- package/codex/skills/create-modal-component/agents/openai.yaml +4 -0
- package/codex/skills/create-svg-icon/SKILL.md +41 -0
- package/codex/skills/create-svg-icon/agents/openai.yaml +3 -0
- package/codex/skills/create-table-component/SKILL.md +189 -0
- package/codex/skills/create-table-component/agents/openai.yaml +3 -0
- package/codex/skills/rhf-lkd-forms/SKILL.md +186 -0
- package/dist/components/MyTable/MyTable.cjs +172 -0
- package/dist/components/MyTable/MyTable.d.ts +18 -0
- package/dist/components/MyTable/MyTable.d.ts.map +1 -0
- package/dist/components/MyTable/MyTable.js +170 -0
- package/dist/components/MyTable/index.d.ts +3 -0
- package/dist/components/MyTable/index.d.ts.map +1 -0
- package/dist/components/TableWrapper/TableWrapper.cjs +13 -0
- package/dist/components/TableWrapper/TableWrapper.d.ts +8 -0
- package/dist/components/TableWrapper/TableWrapper.d.ts.map +1 -0
- package/dist/components/TableWrapper/TableWrapper.js +11 -0
- package/dist/components/TableWrapper/TableWrapperFooter.cjs +11 -0
- package/dist/components/TableWrapper/TableWrapperFooter.d.ts +5 -0
- package/dist/components/TableWrapper/TableWrapperFooter.d.ts.map +1 -0
- package/dist/components/TableWrapper/TableWrapperFooter.js +9 -0
- package/dist/components/TableWrapper/TableWrapperHeader.cjs +11 -0
- package/dist/components/TableWrapper/TableWrapperHeader.d.ts +5 -0
- package/dist/components/TableWrapper/TableWrapperHeader.d.ts.map +1 -0
- package/dist/components/TableWrapper/TableWrapperHeader.js +9 -0
- package/dist/components/TableWrapper/TableWrapperPagination.cjs +31 -0
- package/dist/components/TableWrapper/TableWrapperPagination.d.ts +16 -0
- package/dist/components/TableWrapper/TableWrapperPagination.d.ts.map +1 -0
- package/dist/components/TableWrapper/TableWrapperPagination.js +30 -0
- package/dist/components/TableWrapper/TableWrapperTitle.cjs +11 -0
- package/dist/components/TableWrapper/TableWrapperTitle.d.ts +5 -0
- package/dist/components/TableWrapper/TableWrapperTitle.d.ts.map +1 -0
- package/dist/components/TableWrapper/TableWrapperTitle.js +9 -0
- package/dist/components/TableWrapper/index.d.ts +11 -0
- package/dist/components/TableWrapper/index.d.ts.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.cjs +12 -0
- package/dist/index.js +7 -1
- package/package.json +7 -2
- package/scripts/install-codex-skills.mjs +17 -0
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let _mantine_core = require("@mantine/core");
|
|
4
|
+
let react = require("react");
|
|
5
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
|
+
let clsx = require("clsx");
|
|
7
|
+
clsx = require_runtime.__toESM(clsx, 1);
|
|
8
|
+
let _tanstack_react_table = require("@tanstack/react-table");
|
|
9
|
+
//#region src/components/MyTable/MyTable.tsx
|
|
10
|
+
var MyTable = ({ data, columns, highlightOnHover, isLoading, onRowClick, minWidth = 720, emptyMessage = "Sin datos", enableSorting, variant, layout, manualSorting, onSortingChange, sorting, ...props }) => {
|
|
11
|
+
const [theadHeight, setTheadHeight] = (0, react.useState)(0);
|
|
12
|
+
const setTheadRef = (0, react.useCallback)((node) => {
|
|
13
|
+
if (node) setTheadHeight(node.offsetHeight);
|
|
14
|
+
}, []);
|
|
15
|
+
const isSortingEnabled = enableSorting ?? (Boolean(sorting) || Boolean(onSortingChange));
|
|
16
|
+
const table = (0, _tanstack_react_table.useReactTable)({
|
|
17
|
+
data,
|
|
18
|
+
columns,
|
|
19
|
+
enableSorting: isSortingEnabled,
|
|
20
|
+
getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
|
|
21
|
+
getSortedRowModel: isSortingEnabled && !manualSorting ? (0, _tanstack_react_table.getSortedRowModel)() : void 0,
|
|
22
|
+
manualSorting,
|
|
23
|
+
onSortingChange,
|
|
24
|
+
state: sorting ? { sorting } : void 0
|
|
25
|
+
});
|
|
26
|
+
const rows = table.getRowModel().rows;
|
|
27
|
+
const isVertical = variant === "vertical";
|
|
28
|
+
const headersByColumnId = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
|
|
29
|
+
const cellClassName = (0, clsx.default)(onRowClick && "cursor-pointer");
|
|
30
|
+
const renderHeaderContent = (header) => {
|
|
31
|
+
const content = (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext());
|
|
32
|
+
if (!isSortingEnabled || !header.column.getCanSort()) return content;
|
|
33
|
+
const sorted = header.column.getIsSorted();
|
|
34
|
+
const sortLabel = sorted === "asc" ? "Orden ascendente" : "Orden descendente";
|
|
35
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
36
|
+
className: "flex items-center gap-1",
|
|
37
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
38
|
+
className: "whitespace-nowrap font-semibold text-grey-9 text-sm",
|
|
39
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
40
|
+
type: "button",
|
|
41
|
+
children: content
|
|
42
|
+
}), sorted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Tooltip, {
|
|
43
|
+
label: sortLabel,
|
|
44
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ActionIcon, {
|
|
45
|
+
"aria-label": sortLabel,
|
|
46
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
47
|
+
size: "sm",
|
|
48
|
+
variant: "subtle",
|
|
49
|
+
children: sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOrderAscending, {
|
|
50
|
+
"aria-hidden": "true",
|
|
51
|
+
className: "size-4"
|
|
52
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOrderDescending, {
|
|
53
|
+
"aria-hidden": "true",
|
|
54
|
+
className: "size-4"
|
|
55
|
+
})
|
|
56
|
+
})
|
|
57
|
+
}) : null]
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table.ScrollContainer, {
|
|
61
|
+
minWidth,
|
|
62
|
+
className: "relative",
|
|
63
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.LoadingOverlay, {
|
|
64
|
+
visible: isLoading,
|
|
65
|
+
loaderProps: { type: "bars" },
|
|
66
|
+
overlayProps: { backgroundOpacity: .35 },
|
|
67
|
+
style: { top: isVertical ? 0 : theadHeight }
|
|
68
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table, {
|
|
69
|
+
variant,
|
|
70
|
+
layout: layout ?? (isVertical ? "fixed" : void 0),
|
|
71
|
+
highlightOnHover: !isLoading && highlightOnHover,
|
|
72
|
+
...props,
|
|
73
|
+
children: [isVertical ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Thead, {
|
|
74
|
+
ref: setTheadRef,
|
|
75
|
+
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Th, { children: header.isPlaceholder ? null : renderHeaderContent(header) }, header.id)) }, headerGroup.id))
|
|
76
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table.Tbody, { children: [
|
|
77
|
+
rows.length === 0 && isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, {
|
|
78
|
+
"aria-hidden": "true",
|
|
79
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
|
|
80
|
+
colSpan: isVertical ? 2 : columns.length,
|
|
81
|
+
className: "py-5",
|
|
82
|
+
children: "\xA0"
|
|
83
|
+
})
|
|
84
|
+
}),
|
|
85
|
+
isVertical ? rows.flatMap((row) => row.getVisibleCells().map((cell) => {
|
|
86
|
+
const header = headersByColumnId.get(cell.column.id);
|
|
87
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table.Tr, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Th, { children: header?.isPlaceholder || !header ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
|
|
88
|
+
onClick: () => onRowClick?.(cell.row),
|
|
89
|
+
className: cellClassName,
|
|
90
|
+
children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
|
|
91
|
+
})] }, cell.id);
|
|
92
|
+
})) : rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
|
|
93
|
+
onClick: () => onRowClick?.(cell.row),
|
|
94
|
+
className: cellClassName,
|
|
95
|
+
children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
|
|
96
|
+
}, cell.id)) }, row.id)),
|
|
97
|
+
rows.length === 0 && !isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
|
|
98
|
+
colSpan: isVertical ? 2 : columns.length,
|
|
99
|
+
className: "py-5",
|
|
100
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
|
|
101
|
+
c: "dimmed",
|
|
102
|
+
size: "sm",
|
|
103
|
+
ta: "center",
|
|
104
|
+
children: emptyMessage
|
|
105
|
+
})
|
|
106
|
+
}) })
|
|
107
|
+
] })]
|
|
108
|
+
})]
|
|
109
|
+
});
|
|
110
|
+
};
|
|
111
|
+
var IconOrderAscending = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
112
|
+
width: "24",
|
|
113
|
+
height: "24",
|
|
114
|
+
viewBox: "0 0 24 24",
|
|
115
|
+
fill: "none",
|
|
116
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
117
|
+
...props,
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
120
|
+
d: "M11 5.25C11.4142 5.25 11.75 5.58579 11.75 6C11.75 6.41421 11.4142 6.75 11 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H11Z",
|
|
121
|
+
fill: "currentColor"
|
|
122
|
+
}),
|
|
123
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
124
|
+
d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
|
|
125
|
+
fill: "currentColor"
|
|
126
|
+
}),
|
|
127
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
128
|
+
d: "M13 17.25C13.4142 17.25 13.75 17.5858 13.75 18C13.75 18.4142 13.4142 18.75 13 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H13Z",
|
|
129
|
+
fill: "currentColor"
|
|
130
|
+
}),
|
|
131
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
132
|
+
d: "M17.5264 5.41796C17.821 5.17765 18.2557 5.19512 18.5303 5.46972L21.5303 8.46972C21.8232 8.76261 21.8232 9.23738 21.5303 9.53027C21.2374 9.82316 20.7626 9.82316 20.4697 9.53027L18 7.06054L15.5303 9.53027C15.2374 9.82316 14.7626 9.82316 14.4697 9.53027C14.1768 9.23738 14.1768 8.76261 14.4697 8.46972L17.4697 5.46972L17.5264 5.41796Z",
|
|
133
|
+
fill: "currentColor"
|
|
134
|
+
}),
|
|
135
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
136
|
+
d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
|
|
137
|
+
fill: "currentColor"
|
|
138
|
+
})
|
|
139
|
+
]
|
|
140
|
+
});
|
|
141
|
+
var IconOrderDescending = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
142
|
+
width: "24",
|
|
143
|
+
height: "24",
|
|
144
|
+
viewBox: "0 0 24 24",
|
|
145
|
+
fill: "none",
|
|
146
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
147
|
+
...props,
|
|
148
|
+
children: [
|
|
149
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
150
|
+
d: "M13 5.25C13.4142 5.25 13.75 5.58579 13.75 6C13.75 6.41421 13.4142 6.75 13 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H13Z",
|
|
151
|
+
fill: "currentColor"
|
|
152
|
+
}),
|
|
153
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
154
|
+
d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
|
|
155
|
+
fill: "currentColor"
|
|
156
|
+
}),
|
|
157
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
158
|
+
d: "M11 17.25C11.4142 17.25 11.75 17.5858 11.75 18C11.75 18.4142 11.4142 18.75 11 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H11Z",
|
|
159
|
+
fill: "currentColor"
|
|
160
|
+
}),
|
|
161
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
162
|
+
d: "M20.4697 14.4697C20.7626 14.1768 21.2374 14.1768 21.5303 14.4697C21.8232 14.7626 21.8232 15.2374 21.5303 15.5303L18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L14.4697 15.5303C14.1768 15.2374 14.1768 14.7626 14.4697 14.4697C14.7626 14.1768 15.2374 14.1768 15.5303 14.4697L18 16.9395L20.4697 14.4697Z",
|
|
163
|
+
fill: "currentColor"
|
|
164
|
+
}),
|
|
165
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
166
|
+
d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
|
|
167
|
+
fill: "currentColor"
|
|
168
|
+
})
|
|
169
|
+
]
|
|
170
|
+
});
|
|
171
|
+
//#endregion
|
|
172
|
+
exports.default = MyTable;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { TableProps } from '@mantine/core';
|
|
2
|
+
import { OnChangeFn, Row, SortingState, TableOptions } from '@tanstack/react-table';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
export interface MyTableProps<T> extends Omit<TableProps, 'data'> {
|
|
5
|
+
data: T[];
|
|
6
|
+
columns: TableOptions<T>['columns'];
|
|
7
|
+
isLoading?: boolean;
|
|
8
|
+
onRowClick?: (row: Row<T>) => void;
|
|
9
|
+
minWidth?: number;
|
|
10
|
+
emptyMessage?: ReactNode;
|
|
11
|
+
enableSorting?: boolean;
|
|
12
|
+
manualSorting?: boolean;
|
|
13
|
+
onSortingChange?: OnChangeFn<SortingState>;
|
|
14
|
+
sorting?: SortingState;
|
|
15
|
+
}
|
|
16
|
+
declare const MyTable: <T>({ data, columns, highlightOnHover, isLoading, onRowClick, minWidth, emptyMessage, enableSorting, variant, layout, manualSorting, onSortingChange, sorting, ...props }: MyTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export default MyTable;
|
|
18
|
+
//# sourceMappingURL=MyTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MyTable.d.ts","sourceRoot":"","sources":["../../../src/components/MyTable/MyTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,UAAU,EAAiB,MAAM,eAAe,CAAA;AAC5F,OAAO,EAML,UAAU,EACV,GAAG,EACH,YAAY,EACZ,YAAY,EAEb,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAkB,SAAS,EAAyB,MAAM,OAAO,CAAA;AAExE,MAAM,WAAW,YAAY,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IAC/D,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,QAAA,MAAM,OAAO,GAAI,CAAC,EAAG,uKAelB,YAAY,CAAC,CAAC,CAAC,4CA4IjB,CAAA;AAkED,eAAe,OAAO,CAAA"}
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { ActionIcon, LoadingOverlay, Table, Text, Tooltip } from "@mantine/core";
|
|
3
|
+
import { useCallback, useState } from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import clsx from "clsx";
|
|
6
|
+
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
|
7
|
+
//#region src/components/MyTable/MyTable.tsx
|
|
8
|
+
var MyTable = ({ data, columns, highlightOnHover, isLoading, onRowClick, minWidth = 720, emptyMessage = "Sin datos", enableSorting, variant, layout, manualSorting, onSortingChange, sorting, ...props }) => {
|
|
9
|
+
const [theadHeight, setTheadHeight] = useState(0);
|
|
10
|
+
const setTheadRef = useCallback((node) => {
|
|
11
|
+
if (node) setTheadHeight(node.offsetHeight);
|
|
12
|
+
}, []);
|
|
13
|
+
const isSortingEnabled = enableSorting ?? (Boolean(sorting) || Boolean(onSortingChange));
|
|
14
|
+
const table = useReactTable({
|
|
15
|
+
data,
|
|
16
|
+
columns,
|
|
17
|
+
enableSorting: isSortingEnabled,
|
|
18
|
+
getCoreRowModel: getCoreRowModel(),
|
|
19
|
+
getSortedRowModel: isSortingEnabled && !manualSorting ? getSortedRowModel() : void 0,
|
|
20
|
+
manualSorting,
|
|
21
|
+
onSortingChange,
|
|
22
|
+
state: sorting ? { sorting } : void 0
|
|
23
|
+
});
|
|
24
|
+
const rows = table.getRowModel().rows;
|
|
25
|
+
const isVertical = variant === "vertical";
|
|
26
|
+
const headersByColumnId = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
|
|
27
|
+
const cellClassName = clsx(onRowClick && "cursor-pointer");
|
|
28
|
+
const renderHeaderContent = (header) => {
|
|
29
|
+
const content = flexRender(header.column.columnDef.header, header.getContext());
|
|
30
|
+
if (!isSortingEnabled || !header.column.getCanSort()) return content;
|
|
31
|
+
const sorted = header.column.getIsSorted();
|
|
32
|
+
const sortLabel = sorted === "asc" ? "Orden ascendente" : "Orden descendente";
|
|
33
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
34
|
+
className: "flex items-center gap-1",
|
|
35
|
+
children: [/* @__PURE__ */ jsx("button", {
|
|
36
|
+
className: "whitespace-nowrap font-semibold text-grey-9 text-sm",
|
|
37
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
38
|
+
type: "button",
|
|
39
|
+
children: content
|
|
40
|
+
}), sorted ? /* @__PURE__ */ jsx(Tooltip, {
|
|
41
|
+
label: sortLabel,
|
|
42
|
+
children: /* @__PURE__ */ jsx(ActionIcon, {
|
|
43
|
+
"aria-label": sortLabel,
|
|
44
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
45
|
+
size: "sm",
|
|
46
|
+
variant: "subtle",
|
|
47
|
+
children: sorted === "asc" ? /* @__PURE__ */ jsx(IconOrderAscending, {
|
|
48
|
+
"aria-hidden": "true",
|
|
49
|
+
className: "size-4"
|
|
50
|
+
}) : /* @__PURE__ */ jsx(IconOrderDescending, {
|
|
51
|
+
"aria-hidden": "true",
|
|
52
|
+
className: "size-4"
|
|
53
|
+
})
|
|
54
|
+
})
|
|
55
|
+
}) : null]
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
return /* @__PURE__ */ jsxs(Table.ScrollContainer, {
|
|
59
|
+
minWidth,
|
|
60
|
+
className: "relative",
|
|
61
|
+
children: [/* @__PURE__ */ jsx(LoadingOverlay, {
|
|
62
|
+
visible: isLoading,
|
|
63
|
+
loaderProps: { type: "bars" },
|
|
64
|
+
overlayProps: { backgroundOpacity: .35 },
|
|
65
|
+
style: { top: isVertical ? 0 : theadHeight }
|
|
66
|
+
}), /* @__PURE__ */ jsxs(Table, {
|
|
67
|
+
variant,
|
|
68
|
+
layout: layout ?? (isVertical ? "fixed" : void 0),
|
|
69
|
+
highlightOnHover: !isLoading && highlightOnHover,
|
|
70
|
+
...props,
|
|
71
|
+
children: [isVertical ? null : /* @__PURE__ */ jsx(Table.Thead, {
|
|
72
|
+
ref: setTheadRef,
|
|
73
|
+
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(Table.Th, { children: header.isPlaceholder ? null : renderHeaderContent(header) }, header.id)) }, headerGroup.id))
|
|
74
|
+
}), /* @__PURE__ */ jsxs(Table.Tbody, { children: [
|
|
75
|
+
rows.length === 0 && isLoading && /* @__PURE__ */ jsx(Table.Tr, {
|
|
76
|
+
"aria-hidden": "true",
|
|
77
|
+
children: /* @__PURE__ */ jsx(Table.Td, {
|
|
78
|
+
colSpan: isVertical ? 2 : columns.length,
|
|
79
|
+
className: "py-5",
|
|
80
|
+
children: "\xA0"
|
|
81
|
+
})
|
|
82
|
+
}),
|
|
83
|
+
isVertical ? rows.flatMap((row) => row.getVisibleCells().map((cell) => {
|
|
84
|
+
const header = headersByColumnId.get(cell.column.id);
|
|
85
|
+
return /* @__PURE__ */ jsxs(Table.Tr, { children: [/* @__PURE__ */ jsx(Table.Th, { children: header?.isPlaceholder || !header ? null : flexRender(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ jsx(Table.Td, {
|
|
86
|
+
onClick: () => onRowClick?.(cell.row),
|
|
87
|
+
className: cellClassName,
|
|
88
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
89
|
+
})] }, cell.id);
|
|
90
|
+
})) : rows.map((row) => /* @__PURE__ */ jsx(Table.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Td, {
|
|
91
|
+
onClick: () => onRowClick?.(cell.row),
|
|
92
|
+
className: cellClassName,
|
|
93
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
94
|
+
}, cell.id)) }, row.id)),
|
|
95
|
+
rows.length === 0 && !isLoading && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
|
|
96
|
+
colSpan: isVertical ? 2 : columns.length,
|
|
97
|
+
className: "py-5",
|
|
98
|
+
children: /* @__PURE__ */ jsx(Text, {
|
|
99
|
+
c: "dimmed",
|
|
100
|
+
size: "sm",
|
|
101
|
+
ta: "center",
|
|
102
|
+
children: emptyMessage
|
|
103
|
+
})
|
|
104
|
+
}) })
|
|
105
|
+
] })]
|
|
106
|
+
})]
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
var IconOrderAscending = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
110
|
+
width: "24",
|
|
111
|
+
height: "24",
|
|
112
|
+
viewBox: "0 0 24 24",
|
|
113
|
+
fill: "none",
|
|
114
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
115
|
+
...props,
|
|
116
|
+
children: [
|
|
117
|
+
/* @__PURE__ */ jsx("path", {
|
|
118
|
+
d: "M11 5.25C11.4142 5.25 11.75 5.58579 11.75 6C11.75 6.41421 11.4142 6.75 11 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H11Z",
|
|
119
|
+
fill: "currentColor"
|
|
120
|
+
}),
|
|
121
|
+
/* @__PURE__ */ jsx("path", {
|
|
122
|
+
d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
|
|
123
|
+
fill: "currentColor"
|
|
124
|
+
}),
|
|
125
|
+
/* @__PURE__ */ jsx("path", {
|
|
126
|
+
d: "M13 17.25C13.4142 17.25 13.75 17.5858 13.75 18C13.75 18.4142 13.4142 18.75 13 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H13Z",
|
|
127
|
+
fill: "currentColor"
|
|
128
|
+
}),
|
|
129
|
+
/* @__PURE__ */ jsx("path", {
|
|
130
|
+
d: "M17.5264 5.41796C17.821 5.17765 18.2557 5.19512 18.5303 5.46972L21.5303 8.46972C21.8232 8.76261 21.8232 9.23738 21.5303 9.53027C21.2374 9.82316 20.7626 9.82316 20.4697 9.53027L18 7.06054L15.5303 9.53027C15.2374 9.82316 14.7626 9.82316 14.4697 9.53027C14.1768 9.23738 14.1768 8.76261 14.4697 8.46972L17.4697 5.46972L17.5264 5.41796Z",
|
|
131
|
+
fill: "currentColor"
|
|
132
|
+
}),
|
|
133
|
+
/* @__PURE__ */ jsx("path", {
|
|
134
|
+
d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
|
|
135
|
+
fill: "currentColor"
|
|
136
|
+
})
|
|
137
|
+
]
|
|
138
|
+
});
|
|
139
|
+
var IconOrderDescending = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
140
|
+
width: "24",
|
|
141
|
+
height: "24",
|
|
142
|
+
viewBox: "0 0 24 24",
|
|
143
|
+
fill: "none",
|
|
144
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
145
|
+
...props,
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx("path", {
|
|
148
|
+
d: "M13 5.25C13.4142 5.25 13.75 5.58579 13.75 6C13.75 6.41421 13.4142 6.75 13 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H13Z",
|
|
149
|
+
fill: "currentColor"
|
|
150
|
+
}),
|
|
151
|
+
/* @__PURE__ */ jsx("path", {
|
|
152
|
+
d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
|
|
153
|
+
fill: "currentColor"
|
|
154
|
+
}),
|
|
155
|
+
/* @__PURE__ */ jsx("path", {
|
|
156
|
+
d: "M11 17.25C11.4142 17.25 11.75 17.5858 11.75 18C11.75 18.4142 11.4142 18.75 11 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H11Z",
|
|
157
|
+
fill: "currentColor"
|
|
158
|
+
}),
|
|
159
|
+
/* @__PURE__ */ jsx("path", {
|
|
160
|
+
d: "M20.4697 14.4697C20.7626 14.1768 21.2374 14.1768 21.5303 14.4697C21.8232 14.7626 21.8232 15.2374 21.5303 15.5303L18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L14.4697 15.5303C14.1768 15.2374 14.1768 14.7626 14.4697 14.4697C14.7626 14.1768 15.2374 14.1768 15.5303 14.4697L18 16.9395L20.4697 14.4697Z",
|
|
161
|
+
fill: "currentColor"
|
|
162
|
+
}),
|
|
163
|
+
/* @__PURE__ */ jsx("path", {
|
|
164
|
+
d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
|
|
165
|
+
fill: "currentColor"
|
|
166
|
+
})
|
|
167
|
+
]
|
|
168
|
+
});
|
|
169
|
+
//#endregion
|
|
170
|
+
export { MyTable as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MyTable/index.tsx"],"names":[],"mappings":"AAEA,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
let _mantine_core = require("@mantine/core");
|
|
3
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
|
+
let clsx = require("clsx");
|
|
5
|
+
clsx = require_runtime.__toESM(clsx, 1);
|
|
6
|
+
//#region src/components/TableWrapper/TableWrapper.tsx
|
|
7
|
+
var TableWrapper = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Paper, {
|
|
8
|
+
component: "section",
|
|
9
|
+
className: (0, clsx.default)("flex flex-col px-1 py-0.5", className),
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
//#endregion
|
|
13
|
+
exports.default = TableWrapper;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PaperProps } from '@mantine/core';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export interface TableWrapperProps extends PaperProps {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
declare const TableWrapper: ({ className, ...props }: TableWrapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default TableWrapper;
|
|
8
|
+
//# sourceMappingURL=TableWrapper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,4CAE/D,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Paper } from "@mantine/core";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
//#region src/components/TableWrapper/TableWrapper.tsx
|
|
5
|
+
var TableWrapper = ({ className, ...props }) => /* @__PURE__ */ jsx(Paper, {
|
|
6
|
+
component: "section",
|
|
7
|
+
className: clsx("flex flex-col px-1 py-0.5", className),
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
export { TableWrapper as default };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
3
|
+
let clsx = require("clsx");
|
|
4
|
+
clsx = require_runtime.__toESM(clsx, 1);
|
|
5
|
+
//#region src/components/TableWrapper/TableWrapperFooter.tsx
|
|
6
|
+
var TableWrapperFooter = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
|
|
7
|
+
className: (0, clsx.default)("mt-3 flex justify-center p-2", className),
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
exports.default = TableWrapperFooter;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
export type TableWrapperFooterProps = ComponentProps<'footer'>;
|
|
3
|
+
declare const TableWrapperFooter: ({ className, ...props }: TableWrapperFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default TableWrapperFooter;
|
|
5
|
+
//# sourceMappingURL=TableWrapperFooter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableWrapperFooter.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperFooter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAA;AAE9D,QAAA,MAAM,kBAAkB,GAAI,yBAAyB,uBAAuB,4CAE3E,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
//#region src/components/TableWrapper/TableWrapperFooter.tsx
|
|
4
|
+
var TableWrapperFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("footer", {
|
|
5
|
+
className: clsx("mt-3 flex justify-center p-2", className),
|
|
6
|
+
...props
|
|
7
|
+
});
|
|
8
|
+
//#endregion
|
|
9
|
+
export { TableWrapperFooter as default };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
3
|
+
let clsx = require("clsx");
|
|
4
|
+
clsx = require_runtime.__toESM(clsx, 1);
|
|
5
|
+
//#region src/components/TableWrapper/TableWrapperHeader.tsx
|
|
6
|
+
var TableWrapperHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
|
|
7
|
+
className: (0, clsx.default)("p-2", className),
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
exports.default = TableWrapperHeader;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
export type TableWrapperHeaderProps = ComponentProps<'header'>;
|
|
3
|
+
declare const TableWrapperHeader: ({ className, ...props }: TableWrapperHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default TableWrapperHeader;
|
|
5
|
+
//# sourceMappingURL=TableWrapperHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableWrapperHeader.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAA;AAE9D,QAAA,MAAM,kBAAkB,GAAI,yBAAyB,uBAAuB,4CAE3E,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
//#region src/components/TableWrapper/TableWrapperHeader.tsx
|
|
4
|
+
var TableWrapperHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("header", {
|
|
5
|
+
className: clsx("p-2", className),
|
|
6
|
+
...props
|
|
7
|
+
});
|
|
8
|
+
//#endregion
|
|
9
|
+
export { TableWrapperHeader as default };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
let _mantine_core = require("@mantine/core");
|
|
3
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
|
+
//#region src/components/TableWrapper/TableWrapperPagination.tsx
|
|
5
|
+
var TableWrapperPagination = ({ variant = "long", text, totalRows = 15, pageSize = 10, currentRows = pageSize, value = 1, ...props }) => {
|
|
6
|
+
if (variant === "short") {
|
|
7
|
+
const start = totalRows > 0 ? (value - 1) * pageSize + 1 : 0;
|
|
8
|
+
const end = Math.min(start + currentRows - 1, totalRows);
|
|
9
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
10
|
+
className: "flex w-full items-center justify-end gap-3",
|
|
11
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
12
|
+
className: "text-grey-7 text-sm",
|
|
13
|
+
children: text ?? `${start}-${end} de ${totalRows} filas`
|
|
14
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Pagination, {
|
|
15
|
+
withPages: false,
|
|
16
|
+
value,
|
|
17
|
+
...props
|
|
18
|
+
})]
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Pagination, {
|
|
22
|
+
boundaries: 0,
|
|
23
|
+
siblings: 2,
|
|
24
|
+
withEdges: true,
|
|
25
|
+
classNames: { dots: "hidden" },
|
|
26
|
+
value,
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
//#endregion
|
|
31
|
+
exports.default = TableWrapperPagination;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PaginationProps } from '@mantine/core';
|
|
2
|
+
type TableWrapperPaginationBaseProps = Omit<PaginationProps, 'boundaries' | 'siblings' | 'withControls' | 'withEdges' | 'variant'> & {
|
|
3
|
+
text?: string;
|
|
4
|
+
totalRows?: number;
|
|
5
|
+
currentRows?: number;
|
|
6
|
+
};
|
|
7
|
+
export type TableWrapperPaginationProps = (TableWrapperPaginationBaseProps & {
|
|
8
|
+
variant?: 'long';
|
|
9
|
+
pageSize?: number;
|
|
10
|
+
}) | (TableWrapperPaginationBaseProps & {
|
|
11
|
+
variant: 'short';
|
|
12
|
+
pageSize: number;
|
|
13
|
+
});
|
|
14
|
+
declare const TableWrapperPagination: ({ variant, text, totalRows, pageSize, currentRows, value, ...props }: TableWrapperPaginationProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export default TableWrapperPagination;
|
|
16
|
+
//# sourceMappingURL=TableWrapperPagination.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableWrapperPagination.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAE3D,KAAK,+BAA+B,GAAG,IAAI,CACzC,eAAe,EACf,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,GAAG,SAAS,CACrE,GAAG;IACF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,2BAA2B,GACnC,CAAC,+BAA+B,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAC,GACF,CAAC,+BAA+B,GAAG;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAC,CAAA;AAEN,QAAA,MAAM,sBAAsB,GAAI,sEAQ7B,2BAA2B,4CAyB7B,CAAA;AAED,eAAe,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Pagination } from "@mantine/core";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/TableWrapper/TableWrapperPagination.tsx
|
|
4
|
+
var TableWrapperPagination = ({ variant = "long", text, totalRows = 15, pageSize = 10, currentRows = pageSize, value = 1, ...props }) => {
|
|
5
|
+
if (variant === "short") {
|
|
6
|
+
const start = totalRows > 0 ? (value - 1) * pageSize + 1 : 0;
|
|
7
|
+
const end = Math.min(start + currentRows - 1, totalRows);
|
|
8
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
9
|
+
className: "flex w-full items-center justify-end gap-3",
|
|
10
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
11
|
+
className: "text-grey-7 text-sm",
|
|
12
|
+
children: text ?? `${start}-${end} de ${totalRows} filas`
|
|
13
|
+
}), /* @__PURE__ */ jsx(Pagination, {
|
|
14
|
+
withPages: false,
|
|
15
|
+
value,
|
|
16
|
+
...props
|
|
17
|
+
})]
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
return /* @__PURE__ */ jsx(Pagination, {
|
|
21
|
+
boundaries: 0,
|
|
22
|
+
siblings: 2,
|
|
23
|
+
withEdges: true,
|
|
24
|
+
classNames: { dots: "hidden" },
|
|
25
|
+
value,
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
//#endregion
|
|
30
|
+
export { TableWrapperPagination as default };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
3
|
+
let clsx = require("clsx");
|
|
4
|
+
clsx = require_runtime.__toESM(clsx, 1);
|
|
5
|
+
//#region src/components/TableWrapper/TableWrapperTitle.tsx
|
|
6
|
+
var TableWrapperTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
7
|
+
className: (0, clsx.default)("font-semibold text-lg", className),
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
exports.default = TableWrapperTitle;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
export type TableWrapperTitleProps = ComponentProps<'p'>;
|
|
3
|
+
declare const TableWrapperTitle: ({ className, ...props }: TableWrapperTitleProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default TableWrapperTitle;
|
|
5
|
+
//# sourceMappingURL=TableWrapperTitle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableWrapperTitle.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperTitle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;AAExD,QAAA,MAAM,iBAAiB,GAAI,yBAAyB,sBAAsB,4CAEzE,CAAA;AAED,eAAe,iBAAiB,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
//#region src/components/TableWrapper/TableWrapperTitle.tsx
|
|
4
|
+
var TableWrapperTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
|
|
5
|
+
className: clsx("font-semibold text-lg", className),
|
|
6
|
+
...props
|
|
7
|
+
});
|
|
8
|
+
//#endregion
|
|
9
|
+
export { TableWrapperTitle as default };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type { TableWrapperProps } from './TableWrapper';
|
|
2
|
+
export { default as TableWrapper } from './TableWrapper';
|
|
3
|
+
export type { TableWrapperFooterProps } from './TableWrapperFooter';
|
|
4
|
+
export { default as TableWrapperFooter } from './TableWrapperFooter';
|
|
5
|
+
export type { TableWrapperHeaderProps } from './TableWrapperHeader';
|
|
6
|
+
export { default as TableWrapperHeader } from './TableWrapperHeader';
|
|
7
|
+
export type { TableWrapperPaginationProps } from './TableWrapperPagination';
|
|
8
|
+
export { default as TableWrapperPagination } from './TableWrapperPagination';
|
|
9
|
+
export type { TableWrapperTitleProps } from './TableWrapperTitle';
|
|
10
|
+
export { default as TableWrapperTitle } from './TableWrapperTitle';
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACpE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAC5E,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}
|
|
@@ -12,8 +12,10 @@ export * from './MyNotifications';
|
|
|
12
12
|
export * from './MyNumberInput';
|
|
13
13
|
export * from './MyRadioGroup';
|
|
14
14
|
export * from './MySelect';
|
|
15
|
+
export * from './MyTable';
|
|
15
16
|
export * from './MyTextarea';
|
|
16
17
|
export * from './MyTextInput';
|
|
17
18
|
export * from './MyTimeInput';
|
|
18
19
|
export * from './NavItems';
|
|
20
|
+
export * from './TableWrapper';
|
|
19
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAE7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAE7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
|