karsten-design-system 1.0.46 → 1.0.47
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.
|
@@ -6,18 +6,17 @@ import { Button } from './button.js';
|
|
|
6
6
|
function Modal({ title, size = "md", onClose, onConfirm, labelCloseButton = "Fechar", labelConfirmButton = "Confirmar", isExpanded = false, children, }) {
|
|
7
7
|
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
8
8
|
const toggleFullScreen = () => {
|
|
9
|
-
|
|
10
|
-
setIsFullScreen(!isFullScreen);
|
|
9
|
+
setIsFullScreen(!isFullScreen);
|
|
11
10
|
};
|
|
12
11
|
const modalSizeClass = isFullScreen
|
|
13
|
-
? "w-
|
|
12
|
+
? "w-screen h-screen"
|
|
14
13
|
: {
|
|
15
14
|
sm: "w-1/3",
|
|
16
15
|
md: "w-1/2",
|
|
17
16
|
lg: "w-2/3",
|
|
18
17
|
xl: "w-[90%]",
|
|
19
18
|
}[size];
|
|
20
|
-
return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-20 flex justify-center items-center", children: jsxRuntimeExports.jsxs(Card, { className: `flex flex-col ${modalSizeClass} ${isFullScreen ? "
|
|
19
|
+
return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-20 flex justify-center items-center", children: jsxRuntimeExports.jsxs(Card, { className: `flex flex-col ${modalSizeClass} ${isFullScreen ? "border-none" : ""}`, children: [jsxRuntimeExports.jsxs("div", { className: `flex flex-row items-center justify-between px-4 pt-4 pb-6 ${isFullScreen ? "border-none" : "border-b border-b-stone"}`, children: [title && jsxRuntimeExports.jsx("div", { className: "text-primary font-bold text-xl", children: title }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-6", children: [isExpanded && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFullScreen ? (jsxRuntimeExports.jsx("i", { className: "pi pi-window-minimize", style: { color: '#606060', width: '24px', height: '24px', cursor: 'pointer' }, onClick: toggleFullScreen })) : (jsxRuntimeExports.jsx("i", { className: "pi pi-window-maximize", style: { color: '#606060', width: '24px', height: '24px', cursor: 'pointer' }, onClick: toggleFullScreen })) })), jsxRuntimeExports.jsx("i", { className: "pi pi-times cursor-pointer", style: { color: '#606060', width: '24px', height: '24px', cursor: 'pointer' }, onClick: onClose })] })] }), jsxRuntimeExports.jsx("div", { className: `flex-1 overflow-y-auto ${isFullScreen ? "h-full" : "max-h-[70vh]"} p-6`, children: children }), jsxRuntimeExports.jsxs("div", { className: `w-full flex justify-end pt-10 gap-4 px-6`, children: [onClose && (jsxRuntimeExports.jsx(Button, { label: labelCloseButton, variant: "outline", onClick: onClose, className: "w-full sm:w-auto min-w-[110px] px-4" })), onConfirm && (jsxRuntimeExports.jsx(Button, { label: labelConfirmButton, variant: "primary", onClick: onConfirm, className: "w-full sm:w-auto min-w-[110px] px-4" }))] })] }) }));
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
export { Modal };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/stories/components/modal.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/stories/components/modal.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ function Table({ columns, data, totalRecords, actions = [], columnStyles = [{}],
|
|
|
25
25
|
useEffect(() => {
|
|
26
26
|
setSortedData(data);
|
|
27
27
|
}, [data]);
|
|
28
|
-
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("table", { className: "w-100", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "bg-gray-100", children: [columns.map((column, idx) => (jsxRuntimeExports.jsxs("th", { className: "bg-primary first:rounded-ss-lg font-bold text-background text-sm uppercase p-
|
|
28
|
+
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("table", { className: "w-100", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "bg-gray-100", children: [columns.map((column, idx) => (jsxRuntimeExports.jsxs("th", { className: "bg-primary first:rounded-ss-lg font-bold text-background text-sm uppercase p-3 text-left", onClick: isOrdered ? () => handleSort(column) : undefined, children: [column, isOrdered && (jsxRuntimeExports.jsx("i", { className: "pi pi-sort-alt pl-2 text-xs cursor-pointer", onClick: () => handleSort(column) }))] }, idx))), jsxRuntimeExports.jsx("th", { className: clsx('bg-primary rounded-se-lg font-bold text-background text-sm uppercase p-3 text-right pr-4', actionsHeaderClassName), children: "A\u00C7\u00D5ES" })] }) }), jsxRuntimeExports.jsx("tbody", { children: isLoading ? (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsx("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center bg-gray-50", children: jsxRuntimeExports.jsx("div", { className: "py-2 px-4 flex justify-center items-center gap-2", children: jsxRuntimeExports.jsx(Spinner, { size: "lg" }) }) }) })) : sortedData.length > 0 ? (sortedData.map((item, index) => (jsxRuntimeExports.jsxs("tr", { className: clsx(index % 2 === 0 ? 'bg-background' : 'bg-[#196ECD0D]', item.className), children: [columns.map((column) => (jsxRuntimeExports.jsx("td", { className: clsx('p-3 text-sm text-left', getCellClassName(column, item[column])), children: item[column] }, `${column}-${index}`))), jsxRuntimeExports.jsx("td", { className: clsx('text-sm text-right flex flex-row justify-end p-3 gap-2', actionsColumnsClassName), children: actions.map((action, idx) => (jsxRuntimeExports.jsx("span", { className: "cursor-pointer", onClick: () => action.onClick(item), title: action.label, children: action.icon }, idx))) })] }, index)))) : (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsx("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center text-gray-500 bg-gray-50", children: jsxRuntimeExports.jsxs("div", { className: 'py-2 px-4 rounded-lg font-semibold', children: [jsxRuntimeExports.jsx("i", { className: 'pi pi-database mr-2' }), "N\u00E3o h\u00E1 dados dispon\u00EDveis."] }) }) })) })] }), sortedData.length > 0 && isPaginated && (jsxRuntimeExports.jsx(Paginator, { first: (currentPage - 1) * rowsPerPage, rows: rowsPerPage, totalRecords: totalRecords, onPageChange: (event) => {
|
|
29
29
|
setCurrentPage(event.page + 1);
|
|
30
30
|
onPageChange(event.page + 1);
|
|
31
31
|
} }))] }));
|