@tmlmobilidade/ui 20250305.1754.42 → 20250305.1816.36
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/cjs/index.js +26 -20
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/src/components/layout/Sidebar/index.d.ts +1 -1
- package/dist/cjs/types/src/hooks/use-is-active-domain.d.ts +1 -0
- package/dist/cjs/types/src/lib/generate-icon.d.ts +1 -0
- package/dist/esm/index.js +16 -10
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/src/components/layout/Sidebar/index.d.ts +1 -1
- package/dist/esm/types/src/hooks/use-is-active-domain.d.ts +1 -0
- package/dist/esm/types/src/lib/generate-icon.d.ts +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
@@ -8,7 +8,7 @@ var core = require('@mantine/core');
|
|
8
8
|
var dates = require('@mantine/dates');
|
9
9
|
var modals = require('@mantine/modals');
|
10
10
|
var notifications = require('@mantine/notifications');
|
11
|
-
var
|
11
|
+
var Icon = require('@tabler/icons-react');
|
12
12
|
var reactViewportList = require('react-viewport-list');
|
13
13
|
var hooks = require('@mantine/hooks');
|
14
14
|
var form = require('@mantine/form');
|
@@ -31,6 +31,7 @@ function _interopNamespaceDefault(e) {
|
|
31
31
|
}
|
32
32
|
|
33
33
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
34
|
+
var Icon__namespace = /*#__PURE__*/_interopNamespaceDefault(Icon);
|
34
35
|
|
35
36
|
var jsxRuntime = {exports: {}};
|
36
37
|
|
@@ -1131,9 +1132,9 @@ function ComboboxComponent(props) {
|
|
1131
1132
|
if (clearable
|
1132
1133
|
&& value
|
1133
1134
|
&& (Array.isArray(value) ? value.length > 0 : true)) {
|
1134
|
-
return (jsxRuntimeExports.jsx(core.ActionIcon, { "aria-label": "Clear value", className: styles$m.icon, onClick: () => resetValue(), style: { cursor: 'pointer' }, variant: "transparent", children: jsxRuntimeExports.jsx(
|
1135
|
+
return (jsxRuntimeExports.jsx(core.ActionIcon, { "aria-label": "Clear value", className: styles$m.icon, onClick: () => resetValue(), style: { cursor: 'pointer' }, variant: "transparent", children: jsxRuntimeExports.jsx(Icon.IconX, { size: 24 }) }));
|
1135
1136
|
}
|
1136
|
-
return jsxRuntimeExports.jsx(
|
1137
|
+
return jsxRuntimeExports.jsx(Icon.IconCaretDownFilled, { className: styles$m.icon, size: 24 });
|
1137
1138
|
}
|
1138
1139
|
// Render Selected Values as Pills
|
1139
1140
|
function renderValues() {
|
@@ -1189,7 +1190,7 @@ function ComboboxComponent(props) {
|
|
1189
1190
|
|
1190
1191
|
var styles$l = {"input":"styles-module_input__7GH-0","wrapper":"styles-module_wrapper__676-W","variantWhite":"styles-module_variantWhite__XpqzN","section":"styles-module_section__2Dh7a","sizeSm":"styles-module_sizeSm__cmzmj","label":"styles-module_label__yQwLG","description":"styles-module_description__9hShz"};
|
1191
1192
|
|
1192
|
-
function DateTimePicker({ leftSection = jsxRuntimeExports.jsx(
|
1193
|
+
function DateTimePicker({ leftSection = jsxRuntimeExports.jsx(Icon.IconCalendar, { size: 20 }), ...props }) {
|
1193
1194
|
return jsxRuntimeExports.jsx(dates.DateTimePicker, { classNames: { ...styles$l, ...props.classNames }, style: { width: props.fullWidth ? '100%' : undefined }, ...props, leftSection: leftSection });
|
1194
1195
|
}
|
1195
1196
|
|
@@ -1213,7 +1214,7 @@ function DeleteActionIcon(props) {
|
|
1213
1214
|
}
|
1214
1215
|
};
|
1215
1216
|
// C. Render
|
1216
|
-
return (jsxRuntimeExports.jsx(ActionIcon, { onClick: handleClick, variant: "danger", children: jsxRuntimeExports.jsx(
|
1217
|
+
return (jsxRuntimeExports.jsx(ActionIcon, { onClick: handleClick, variant: "danger", children: jsxRuntimeExports.jsx(Icon.IconTrash, {}) }));
|
1217
1218
|
}
|
1218
1219
|
|
1219
1220
|
var styles$k = {"description":"styles-module_description__RBHPs"};
|
@@ -1253,7 +1254,7 @@ function FileButton({ accept, disabled, icon, label, loading, onCancel, onFileCh
|
|
1253
1254
|
};
|
1254
1255
|
//
|
1255
1256
|
// C. Render Components
|
1256
|
-
return (jsxRuntimeExports.jsx(Button, { disabled: disabled || isLoading, icon: icon ?? jsxRuntimeExports.jsx(
|
1257
|
+
return (jsxRuntimeExports.jsx(Button, { disabled: disabled || isLoading, icon: icon ?? jsxRuntimeExports.jsx(Icon.IconUpload, {}), label: label, loading: isLoading, onClick: handleButtonClick, ...props }));
|
1257
1258
|
}
|
1258
1259
|
|
1259
1260
|
var styles$j = {"label":"styles-module_label__eX438"};
|
@@ -1286,7 +1287,7 @@ Menu.Label = function MenuLabel(props) {
|
|
1286
1287
|
|
1287
1288
|
/* * */
|
1288
1289
|
function PasswordInput({ classNames, error, value, ...props }) {
|
1289
|
-
return (jsxRuntimeExports.jsx(core.PasswordInput, { classNames: classNames, error: error, value: value, visibilityToggleIcon: ({ reveal }) => reveal ? jsxRuntimeExports.jsx(
|
1290
|
+
return (jsxRuntimeExports.jsx(core.PasswordInput, { classNames: classNames, error: error, value: value, visibilityToggleIcon: ({ reveal }) => reveal ? jsxRuntimeExports.jsx(Icon.IconEye, { size: 18 }) : jsxRuntimeExports.jsx(Icon.IconEyeClosed, { size: 18 }), ...props }));
|
1290
1291
|
}
|
1291
1292
|
|
1292
1293
|
var styles$h = {"root":"styles-module_root__vNUQ9","indicator":"styles-module_indicator__0XMRf","label":"styles-module_label__Mf1Ea"};
|
@@ -1349,7 +1350,7 @@ function Component({ classNames, error, validation, value, ...props }) {
|
|
1349
1350
|
}, [value]);
|
1350
1351
|
//
|
1351
1352
|
// C. Render components
|
1352
|
-
const renderTooltip = (tooltip) => (jsxRuntimeExports.jsx(core.Tooltip, { label: tooltip, position: "top-end", transitionProps: { transition: 'pop-bottom-right' }, withArrow: true, children: jsxRuntimeExports.jsx(core.Text, { c: "dimmed", component: "div", style: { cursor: 'help' }, children: jsxRuntimeExports.jsx(core.Center, { children: jsxRuntimeExports.jsx(
|
1353
|
+
const renderTooltip = (tooltip) => (jsxRuntimeExports.jsx(core.Tooltip, { label: tooltip, position: "top-end", transitionProps: { transition: 'pop-bottom-right' }, withArrow: true, children: jsxRuntimeExports.jsx(core.Text, { c: "dimmed", component: "div", style: { cursor: 'help' }, children: jsxRuntimeExports.jsx(core.Center, { children: jsxRuntimeExports.jsx(Icon.IconInfoCircle, { stroke: 1.5, style: { height: core.rem(18), width: core.rem(18) } }) }) }) }));
|
1353
1354
|
return (jsxRuntimeExports.jsx(core.TextInput, { classNames: classNames, error: error ? error : isValid ? '' : error, rightSection: props.tooltip && renderTooltip(props.tooltip), value: value, ...props }));
|
1354
1355
|
}
|
1355
1356
|
|
@@ -1504,7 +1505,7 @@ function DataTableHeader({ columns, }) {
|
|
1504
1505
|
const renderSortIcon = (column) => {
|
1505
1506
|
if (!column.sortable)
|
1506
1507
|
return null;
|
1507
|
-
return (jsxRuntimeExports.jsx(ActionIcon, { variant: "muted", children: sortState?.accessor === column.accessor ? (sortState.order === 'asc' ? (jsxRuntimeExports.jsx(
|
1508
|
+
return (jsxRuntimeExports.jsx(ActionIcon, { variant: "muted", children: sortState?.accessor === column.accessor ? (sortState.order === 'asc' ? (jsxRuntimeExports.jsx(Icon.IconArrowUpRhombus, { size: 18 })) : sortState.order === 'desc' ? (jsxRuntimeExports.jsx(Icon.IconArrowDownRhombus, { size: 18 })) : (jsxRuntimeExports.jsx(Icon.IconArrowsUpDown, { size: 18 }))) : (jsxRuntimeExports.jsx(Icon.IconArrowsUpDown, { size: 18 })) }));
|
1508
1509
|
};
|
1509
1510
|
return (jsxRuntimeExports.jsx(core.Table.Thead, { className: cn(styles$b.header), children: jsxRuntimeExports.jsx(core.Table.Tr, { className: cn(styles$b.row), children: columns.map((column, idx) => (jsxRuntimeExports.jsx(core.Table.Th, { className: cn(styles$b.cell), style: {
|
1510
1511
|
maxWidth: column.width,
|
@@ -1559,15 +1560,12 @@ function DataTableContent({ classnames, columns, maxHeight, onRowClick, onRowCon
|
|
1559
1560
|
return (jsxRuntimeExports.jsxs("div", { className: cn(styles$8.root, classnames?.root), children: [jsxRuntimeExports.jsx(DataTableTitle, { search: search, title: title ?? '' }), jsxRuntimeExports.jsx("div", { className: cn(styles$8.tableWrapper, classnames?.tableWrapper), style: { maxHeight: maxHeight || '100%' }, children: jsxRuntimeExports.jsxs(core.Table, { className: cn(styles$8.table, classnames?.table, 'block'), children: [jsxRuntimeExports.jsx(DataTableHeader, { columns: columns }), jsxRuntimeExports.jsx(core.Table.Tbody, { children: jsxRuntimeExports.jsx(reactViewportList.ViewportList, { itemMargin: 0, items: data.records, children: (record, rowIndex) => (jsxRuntimeExports.jsx(DataTableRow, { columns: columns, onRowClick: onRowClick, onRowContextMenu: onRowContextMenu, onRowDoubleClick: onRowDoubleClick, record: record }, rowIdAccessor ? getValueAtPath(record, rowIdAccessor) : rowIndex)) }) })] }) })] }));
|
1560
1561
|
}
|
1561
1562
|
|
1562
|
-
function
|
1563
|
+
function useIsActiveDomain(domain) {
|
1563
1564
|
const [isActive, setIsActive] = React.useState(false);
|
1564
1565
|
React.useEffect(() => {
|
1565
1566
|
const handleRouteChange = () => {
|
1566
|
-
const
|
1567
|
-
if (
|
1568
|
-
setIsActive(true);
|
1569
|
-
}
|
1570
|
-
else if (href && pathname.includes(href) && href !== '/') {
|
1567
|
+
const currentDomain = window.location.hostname;
|
1568
|
+
if (domain === currentDomain) {
|
1571
1569
|
setIsActive(true);
|
1572
1570
|
}
|
1573
1571
|
else {
|
@@ -1583,10 +1581,18 @@ function useIsActivePage(href) {
|
|
1583
1581
|
window.removeEventListener('pushState', handleRouteChange);
|
1584
1582
|
window.removeEventListener('replaceState', handleRouteChange);
|
1585
1583
|
};
|
1586
|
-
}, [
|
1584
|
+
}, [domain]);
|
1587
1585
|
return isActive;
|
1588
1586
|
}
|
1589
1587
|
|
1588
|
+
function generateIcon(name) {
|
1589
|
+
const IconComponent = Icon__namespace[name];
|
1590
|
+
if (!IconComponent) {
|
1591
|
+
return null;
|
1592
|
+
}
|
1593
|
+
return React.createElement(IconComponent);
|
1594
|
+
}
|
1595
|
+
|
1590
1596
|
var styles$7 = {"container":"styles-module_container__tduxg","navWrapper":"styles-module_navWrapper__Xb59N","navButton":"styles-module_navButton__kTv0k","selected":"styles-module_selected__w-GVG","disabled":"styles-module_disabled__lxQjN"};
|
1591
1597
|
|
1592
1598
|
function Sidebar({ items, }) {
|
@@ -1599,11 +1605,11 @@ function Sidebar({ items, }) {
|
|
1599
1605
|
//
|
1600
1606
|
}
|
1601
1607
|
function SidebarItem({ classNames, disabled, href, icon, label, }) {
|
1602
|
-
const isActive =
|
1608
|
+
const isActive = useIsActiveDomain(href);
|
1603
1609
|
return (jsxRuntimeExports.jsx(core.Tooltip, { label: label, position: "right", children: jsxRuntimeExports.jsx("a", { href: href, children: jsxRuntimeExports.jsx(core.ActionIcon, { size: "xl", className: cn(styles$7.navButton, classNames?.navButton, {
|
1604
1610
|
[styles$7.disabled]: disabled,
|
1605
1611
|
[styles$7.selected]: isActive,
|
1606
|
-
}), children: icon }) }) }));
|
1612
|
+
}), children: typeof icon === 'string' ? generateIcon(icon) : icon }) }) }));
|
1607
1613
|
}
|
1608
1614
|
|
1609
1615
|
/* * */
|
@@ -1615,7 +1621,7 @@ function AppOptions() {
|
|
1615
1621
|
// B. Handle actions
|
1616
1622
|
//
|
1617
1623
|
// C. Render components
|
1618
|
-
return (jsxRuntimeExports.jsxs(Menu, { offset: 15, position: "bottom-end", shadow: "lg", children: [jsxRuntimeExports.jsx(Menu.Target, { children: jsxRuntimeExports.jsx(ActionIcon, { color: "gray", variant: "muted", children: jsxRuntimeExports.jsx(
|
1624
|
+
return (jsxRuntimeExports.jsxs(Menu, { offset: 15, position: "bottom-end", shadow: "lg", children: [jsxRuntimeExports.jsx(Menu.Target, { children: jsxRuntimeExports.jsx(ActionIcon, { color: "gray", variant: "muted", children: jsxRuntimeExports.jsx(Icon.IconSettings, { size: 20 }) }) }), jsxRuntimeExports.jsxs(Menu.Dropdown, { children: [jsxRuntimeExports.jsx(Menu.Divider, {}), jsxRuntimeExports.jsxs(Menu.Item, { color: "red", children: [jsxRuntimeExports.jsx(Icon.IconLogin, { size: 20 }), "Logout"] }), jsxRuntimeExports.jsx(Menu.Divider, {})] })] }));
|
1619
1625
|
//
|
1620
1626
|
}
|
1621
1627
|
|
@@ -1662,7 +1668,7 @@ function Section({ children, classNames, description, icon, title, titleAs = 'h2
|
|
1662
1668
|
const renderControl = () => {
|
1663
1669
|
return (jsxRuntimeExports.jsxs("div", { className: styles$3.titleWrapper, children: [icon && icon, React.createElement(titleAs, { className: styles$3.title }, title), description && jsxRuntimeExports.jsx("p", { className: styles$3.description, children: description })] }));
|
1664
1670
|
};
|
1665
|
-
return (jsxRuntimeExports.jsx(core.Accordion, { chevron: jsxRuntimeExports.jsx(
|
1671
|
+
return (jsxRuntimeExports.jsx(core.Accordion, { chevron: jsxRuntimeExports.jsx(Icon.IconCaretLeftFilled, { className: styles$3.icon }), classNames: { ...styles$3, ...classNames }, children: jsxRuntimeExports.jsxs(core.Accordion.Item, { value: "section", children: [jsxRuntimeExports.jsx(core.Accordion.Control, { children: renderControl() }), jsxRuntimeExports.jsx(core.Accordion.Panel, { children: children })] }) }));
|
1666
1672
|
}
|
1667
1673
|
|
1668
1674
|
var styles$2 = {"root":"styles-module_root__gwoL6"};
|