karsten-design-system 1.2.47 → 1.2.49
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/index.js +63 -74
- package/dist/index.js.map +1 -1
- package/dist/stories/components/header.d.ts +2 -1
- package/dist/stories/components/sidebar.d.ts +3 -1
- package/dist/types/stories/components/header.d.ts +2 -1
- package/dist/types/stories/components/sidebar.d.ts +3 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -443,15 +443,15 @@ function Tooltip({ text, children }) {
|
|
|
443
443
|
}, children: text }), document.body)] }));
|
|
444
444
|
}
|
|
445
445
|
|
|
446
|
-
function Sidebar({ item, onClose, topItem }) {
|
|
447
|
-
return (jsx("div", { className: "fixed h-[calc(100vh_-_64px)] bottom-0 w-72 bg-light-500 dark:bg-dark-100 z-50 shadow-container dark:border dark:border-dark-500 dark:shadow-dark-400", children: jsxs("div", { className: "overflow-hidden flex flex-col h-full", children: [jsxs("div", { className: "shrink-0", children: [jsx("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-light-200 hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:hover:bg-dark-400", children: jsx(Link$1, { to: "/", className: "font-roboto text-base text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: onClose, "aria-label": "Ir para o in\u00EDcio", children:
|
|
446
|
+
function Sidebar({ item, onClose, topItem, homeTranslation = 'Início', favoritesTranslation = 'Favoritos', }) {
|
|
447
|
+
return (jsx("div", { className: "fixed h-[calc(100vh_-_64px)] bottom-0 w-72 bg-light-500 dark:bg-dark-100 z-50 shadow-container dark:border dark:border-dark-500 dark:shadow-dark-400", children: jsxs("div", { className: "overflow-hidden flex flex-col h-full", children: [jsxs("div", { className: "shrink-0", children: [jsx("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-light-200 hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:hover:bg-dark-400", children: jsx(Link$1, { to: "/", className: "font-roboto text-base text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: onClose, "aria-label": "Ir para o in\u00EDcio", children: homeTranslation }) }), topItem?.map((item) => (jsx("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-light-200 hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: item.isWindowOpen ? (jsx("button", { className: "font-roboto text-base text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: () => {
|
|
448
448
|
if (onClose)
|
|
449
449
|
onClose();
|
|
450
450
|
window?.open(item.path, '_blank');
|
|
451
|
-
}, "aria-label": `Ir para ${item.title}`, children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) })) : (jsx(Link$1, { to: item.path || '', className: "font-roboto text-base text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) })) }, `top-item-${item.id ?? item.title}`))), jsxs("div", { className: "flex flex-row gap-3 items-center pl-6 pt-8 pb-4", children: [jsx("i", { className: "pi pi-star text-light-900 !font-bold text-lg dark:text-light-500" }), jsx("p", { className: "text-light-900 font-bold text-lg dark:text-light-500", children:
|
|
451
|
+
}, "aria-label": `Ir para ${item.title}`, children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) })) : (jsx(Link$1, { to: item.path || '', className: "font-roboto text-base text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) })) }, `top-item-${item.id ?? item.title}`))), jsxs("div", { className: "flex flex-row gap-3 items-center pl-6 pt-8 pb-4", children: [jsx("i", { className: "pi pi-star text-light-900 !font-bold text-lg dark:text-light-500" }), jsx("p", { className: "text-light-900 font-bold text-lg dark:text-light-500", children: favoritesTranslation })] })] }), jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden px-0 pb-4 pr-1 custom-scrollbar", children: item?.map((item) => (jsx(Link$1, { className: "flex flex-row items-center pl-6 gap-2 border-b border-b-light-200 hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", to: item.path || '', onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx("span", { className: "font-roboto text-base py-2 text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) }) }, item.id))) })] }) }));
|
|
452
452
|
}
|
|
453
453
|
|
|
454
|
-
function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setOpenNotifications, isRenderNotifications = false, rightActions, redirect = '/', }) {
|
|
454
|
+
function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setOpenNotifications, isRenderNotifications = false, rightActions, redirect = '/', helloTranslation = 'Olá', }) {
|
|
455
455
|
const [openSidebar, setOpenSidebar] = useState(false);
|
|
456
456
|
const [openUserConfig, setOpenUserConfig] = useState(false);
|
|
457
457
|
const userConfigRef = useRef(null);
|
|
@@ -472,7 +472,7 @@ function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setO
|
|
|
472
472
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
473
473
|
};
|
|
474
474
|
}, [openUserConfig]);
|
|
475
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16 border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link")] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: ["
|
|
475
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16 border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link")] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: [helloTranslation, ", ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 bg-light-500 shadow-md border border-light-400 z-20 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 hover:bg-light-300 dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
|
|
476
476
|
if (onClick)
|
|
477
477
|
onClick();
|
|
478
478
|
setOpenUserConfig(false);
|
|
@@ -4535,18 +4535,11 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
|
|
|
4535
4535
|
if (openFilter && filterButtonRefs.current[openFilter]) {
|
|
4536
4536
|
const button = filterButtonRefs.current[openFilter];
|
|
4537
4537
|
if (button) {
|
|
4538
|
-
const rect = button.getBoundingClientRect();
|
|
4539
4538
|
const modalHeight = 150;
|
|
4540
|
-
const spaceBelow = window.innerHeight -
|
|
4541
|
-
const spaceAbove =
|
|
4539
|
+
const spaceBelow = window.innerHeight - button.getBoundingClientRect().bottom;
|
|
4540
|
+
const spaceAbove = button.getBoundingClientRect().top;
|
|
4542
4541
|
const openAbove = spaceBelow < modalHeight && spaceAbove > modalHeight;
|
|
4543
|
-
setFilterModalPosition({
|
|
4544
|
-
top: openAbove
|
|
4545
|
-
? rect.top + window.scrollY - modalHeight
|
|
4546
|
-
: rect.bottom + window.scrollY,
|
|
4547
|
-
left: rect.left + window.scrollX,
|
|
4548
|
-
openAbove,
|
|
4549
|
-
});
|
|
4542
|
+
setFilterModalPosition({ openAbove });
|
|
4550
4543
|
}
|
|
4551
4544
|
}
|
|
4552
4545
|
else {
|
|
@@ -4581,68 +4574,64 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
|
|
|
4581
4574
|
onFilterChange(newFilters);
|
|
4582
4575
|
}
|
|
4583
4576
|
};
|
|
4584
|
-
return (jsxs("div", { children: [jsxs("table", { className: "w-full", children: [jsx("thead", { children: jsxs("tr", { className: "bg-gray-100 dark:bg-dark-100", children: [columns.map((column) => (jsxs("th", { scope: "col", className: "bg-primary first:rounded-ss-lg font-bold text-light-500 text-sm uppercase p-3 text-left", children: [jsx("div", { children: openFilter === column.dataIndex &&
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
|
|
4577
|
+
return (jsxs("div", { children: [jsxs("table", { className: "w-full", children: [jsx("thead", { children: jsxs("tr", { className: "bg-gray-100 dark:bg-dark-100", children: [columns.map((column) => (jsxs("th", { scope: "col", className: "bg-primary first:rounded-ss-lg font-bold text-light-500 text-sm uppercase p-3 text-left relative", children: [jsx("div", { children: openFilter === column.dataIndex && filterModalPosition && (jsxs("div", { ref: filterModalRef, style: {
|
|
4578
|
+
position: 'absolute',
|
|
4579
|
+
top: filterModalPosition.openAbove ? 'auto' : '100%',
|
|
4580
|
+
bottom: filterModalPosition.openAbove ? '100%' : 'auto',
|
|
4581
|
+
left: 0,
|
|
4582
|
+
zIndex: 20,
|
|
4583
|
+
width: 276,
|
|
4584
|
+
borderRadius: 8,
|
|
4585
|
+
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
|
4586
|
+
border: '1px solid var(--tw-border-light-500, #e5e7eb)',
|
|
4587
|
+
color: 'var(--tw-text-primary, #222)',
|
|
4588
|
+
padding: 16,
|
|
4589
|
+
}, className: "normal-case bg-light-500 dark:bg-dark-100 dark:text-light-500", children: [jsxs("div", { className: "space-y-4 text-primary dark:text-light-500", children: [jsxs("h1", { className: "text-primary text-sm dark:text-light-500", children: ["Filtrar por ", column?.label?.toLowerCase()] }), jsxs("div", { className: "w-full", children: [column.filterType === 'text' && (jsx(Input, { placeholder: "Digite para filtrar", value: filters[column.dataIndex] || '', onChange: (e) => setFilters((prev) => ({
|
|
4590
|
+
...prev,
|
|
4591
|
+
[column.dataIndex]: e,
|
|
4592
|
+
})), mask: column?.mask, "aria-label": `Filtrar por ${column.label}`, maxLength: column?.maxLength || 40 })), column.filterType === 'select' && (jsx(Select, { options: column.filterOptions || [], value: column.filterOptions?.find((option) => option.value ===
|
|
4593
|
+
filters[column.dataIndex]) || null, onChange: (selected) => setFilters((prev) => ({
|
|
4594
|
+
...prev,
|
|
4595
|
+
[column.dataIndex]: selected?.value ?? null,
|
|
4596
|
+
})), placeholder: "Selecione uma op\u00E7\u00E3o", label: "", "aria-label": `Filtrar por ${column.label}`, isReadOnly: !column.isSearchableInSelectMode })), column.filterType === 'multiSelect' && (jsx(MultiSelect, { options: column.filterOptions || [], value: (filters[column.dataIndex]
|
|
4597
|
+
? JSON.parse(filters[column.dataIndex])
|
|
4598
|
+
: []), onChange: (selected) => setFilters((prev) => ({
|
|
4599
|
+
...prev,
|
|
4600
|
+
[column.dataIndex]: selected
|
|
4601
|
+
? JSON.stringify(selected)
|
|
4602
|
+
: '',
|
|
4603
|
+
})), placeholder: "Selecione uma ou mais op\u00E7\u00F5es", label: "", "aria-label": `Filtrar por ${column.label}` })), column.filterType === 'singleDate' && (jsx(CalendarInput, { label: "", selectionMode: "single", placeholder: "Selecione uma data", value: filters[column.dataIndex]
|
|
4604
|
+
? new Date(filters[column.dataIndex])
|
|
4605
|
+
: null, onChange: (e) => {
|
|
4606
|
+
const value = e?.value;
|
|
4607
|
+
setFilters((prev) => ({
|
|
4605
4608
|
...prev,
|
|
4606
|
-
[column.dataIndex]:
|
|
4607
|
-
|
|
4608
|
-
|
|
4609
|
-
|
|
4609
|
+
[column.dataIndex]: value instanceof Date
|
|
4610
|
+
? value.toISOString()
|
|
4611
|
+
: '',
|
|
4612
|
+
}));
|
|
4613
|
+
}, ariaLabel: `Filtrar por ${column.label}`, showTime: column.isShowTimeInDateMode ? true : false })), column.filterType === 'rangeDate' && (jsx(CalendarInput, { label: "", selectionMode: "range", placeholder: "Selecione as datas", value: filters[column.dataIndex]
|
|
4614
|
+
? parseDateRange(filters[column.dataIndex])
|
|
4615
|
+
: null, onChange: (e) => {
|
|
4616
|
+
const range = e?.value;
|
|
4617
|
+
setFilters((prev) => ({
|
|
4610
4618
|
...prev,
|
|
4611
|
-
[column.dataIndex]:
|
|
4612
|
-
? JSON.stringify(
|
|
4619
|
+
[column.dataIndex]: range
|
|
4620
|
+
? JSON.stringify(range)
|
|
4613
4621
|
: '',
|
|
4614
|
-
}))
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
|
|
4622
|
-
|
|
4623
|
-
|
|
4624
|
-
|
|
4625
|
-
|
|
4626
|
-
|
|
4627
|
-
const range = e?.value;
|
|
4628
|
-
setFilters((prev) => ({
|
|
4629
|
-
...prev,
|
|
4630
|
-
[column.dataIndex]: range
|
|
4631
|
-
? JSON.stringify(range)
|
|
4632
|
-
: '',
|
|
4633
|
-
}));
|
|
4634
|
-
}, ariaLabel: `Filtrar por ${column.label}`, minDate: column?.minDate
|
|
4635
|
-
? new Date(column?.minDate)
|
|
4636
|
-
: undefined, maxDate: column?.maxDate
|
|
4637
|
-
? new Date(column?.maxDate)
|
|
4638
|
-
: undefined, showTime: column.isShowTimeInDateMode ? true : false }))] })] }), jsxs("div", { className: "flex justify-between mt-4", children: [jsx(Button, { variant: "outline", onClick: () => {
|
|
4639
|
-
setFilters((prev) => ({
|
|
4640
|
-
...prev,
|
|
4641
|
-
[column.dataIndex]: '',
|
|
4642
|
-
}));
|
|
4643
|
-
setOpenFilter(null);
|
|
4644
|
-
setFilterModalPosition(null);
|
|
4645
|
-
}, label: "Fechar", width: "10", size: "small", "aria-label": "Fechar filtro" }), jsx(Button, { variant: "secondary", onClick: () => handleClearFilter(column), label: "Limpar", width: "10", size: "small", "aria-label": "Limpar filtro" }), jsx(Button, { variant: "primary", onClick: () => handleFilter(column), label: "Aplicar", width: "10", size: "small", "aria-label": "Aplicar filtro" })] })] }), document.body) }), jsxs("div", { className: "flex flex-col items-start", children: [column.label, isOrdered && (jsxs("div", { className: "flex flex-row", children: [jsx("button", { onClick: () => handleSort(column.dataIndex), "aria-label": `Ordenar por ${column.label}`, children: jsx("i", { className: clsx('text-xs cursor-pointer pi', sortDirection[column.dataIndex] === 'ASC' &&
|
|
4622
|
+
}));
|
|
4623
|
+
}, ariaLabel: `Filtrar por ${column.label}`, minDate: column?.minDate
|
|
4624
|
+
? new Date(column?.minDate)
|
|
4625
|
+
: undefined, maxDate: column?.maxDate
|
|
4626
|
+
? new Date(column?.maxDate)
|
|
4627
|
+
: undefined, showTime: column.isShowTimeInDateMode ? true : false }))] })] }), jsxs("div", { className: "flex justify-between mt-4", children: [jsx(Button, { variant: "outline", onClick: () => {
|
|
4628
|
+
setFilters((prev) => ({
|
|
4629
|
+
...prev,
|
|
4630
|
+
[column.dataIndex]: '',
|
|
4631
|
+
}));
|
|
4632
|
+
setOpenFilter(null);
|
|
4633
|
+
setFilterModalPosition(null);
|
|
4634
|
+
}, label: "Fechar", width: "10", size: "small", "aria-label": "Fechar filtro" }), jsx(Button, { variant: "secondary", onClick: () => handleClearFilter(column), label: "Limpar", width: "10", size: "small", "aria-label": "Limpar filtro" }), jsx(Button, { variant: "primary", onClick: () => handleFilter(column), label: "Aplicar", width: "10", size: "small", "aria-label": "Aplicar filtro" })] })] })) }), jsxs("div", { className: "flex flex-col items-start", children: [column.label, isOrdered && (jsxs("div", { className: "flex flex-row", children: [jsx("button", { onClick: () => handleSort(column.dataIndex), "aria-label": `Ordenar por ${column.label}`, children: jsx("i", { className: clsx('text-xs cursor-pointer pi', sortDirection[column.dataIndex] === 'ASC' &&
|
|
4646
4635
|
'pi-sort-amount-up-alt', sortDirection[column.dataIndex] === 'DESC' &&
|
|
4647
4636
|
'pi-sort-amount-down', !sortDirection[column.dataIndex] && 'pi-sort-alt') }) }), column.filterable && (jsx(Fragment, { children: jsx("button", { ref: (el) => {
|
|
4648
4637
|
filterButtonRefs.current[column.dataIndex] = el;
|