karsten-design-system 1.0.45 → 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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"}
|
|
@@ -3,8 +3,9 @@ import { useState, useEffect } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { sortData } from '../../utils/sortData.js';
|
|
5
5
|
import { Paginator } from './paginator.js';
|
|
6
|
+
import { Spinner } from './spinner.js';
|
|
6
7
|
|
|
7
|
-
function Table({ columns, data, totalRecords, actions = [], columnStyles = [{}], isOrdered = true, actionsHeaderClassName = '', actionsColumnsClassName = '', rowsPerPage = 10, onPageChange, isPaginated = true, }) {
|
|
8
|
+
function Table({ columns, data, totalRecords, actions = [], columnStyles = [{}], isOrdered = true, actionsHeaderClassName = '', actionsColumnsClassName = '', rowsPerPage = 10, onPageChange, isPaginated = true, isLoading = false }) {
|
|
8
9
|
const [sortDirection, setSortDirection] = useState('ASC');
|
|
9
10
|
const [sortedData, setSortedData] = useState(data);
|
|
10
11
|
const [currentPage, setCurrentPage] = useState(1);
|
|
@@ -24,10 +25,10 @@ function Table({ columns, data, totalRecords, actions = [], columnStyles = [{}],
|
|
|
24
25
|
useEffect(() => {
|
|
25
26
|
setSortedData(data);
|
|
26
27
|
}, [data]);
|
|
27
|
-
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
+
setCurrentPage(event.page + 1);
|
|
30
|
+
onPageChange(event.page + 1);
|
|
31
|
+
} }))] }));
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
export { Table };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sources":["../../../../src/stories/components/table.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"
|
|
1
|
+
{"version":3,"file":"table.js","sources":["../../../../src/stories/components/table.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -16,5 +16,6 @@ export type TableProps = {
|
|
|
16
16
|
rowsPerPage?: number;
|
|
17
17
|
onPageChange: (page: number) => void;
|
|
18
18
|
isPaginated?: boolean;
|
|
19
|
+
isLoading?: boolean;
|
|
19
20
|
};
|
|
20
|
-
export declare function Table({ columns, data, totalRecords, actions, columnStyles, isOrdered, actionsHeaderClassName, actionsColumnsClassName, rowsPerPage, onPageChange, isPaginated, }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function Table({ columns, data, totalRecords, actions, columnStyles, isOrdered, actionsHeaderClassName, actionsColumnsClassName, rowsPerPage, onPageChange, isPaginated, isLoading }: TableProps): import("react/jsx-runtime").JSX.Element;
|