@tmlmobilidade/ui 20250305.1746.10 → 20250305.1809.16
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 +21 -13
- 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/lib/generate-icon.d.ts +1 -0
- package/dist/esm/index.js +12 -4
- 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/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,10 +8,9 @@ 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
|
-
var pjson = require('package.json');
|
15
14
|
var form = require('@mantine/form');
|
16
15
|
|
17
16
|
function _interopNamespaceDefault(e) {
|
@@ -32,6 +31,7 @@ function _interopNamespaceDefault(e) {
|
|
32
31
|
}
|
33
32
|
|
34
33
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
34
|
+
var Icon__namespace = /*#__PURE__*/_interopNamespaceDefault(Icon);
|
35
35
|
|
36
36
|
var jsxRuntime = {exports: {}};
|
37
37
|
|
@@ -1132,9 +1132,9 @@ function ComboboxComponent(props) {
|
|
1132
1132
|
if (clearable
|
1133
1133
|
&& value
|
1134
1134
|
&& (Array.isArray(value) ? value.length > 0 : true)) {
|
1135
|
-
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 }) }));
|
1136
1136
|
}
|
1137
|
-
return jsxRuntimeExports.jsx(
|
1137
|
+
return jsxRuntimeExports.jsx(Icon.IconCaretDownFilled, { className: styles$m.icon, size: 24 });
|
1138
1138
|
}
|
1139
1139
|
// Render Selected Values as Pills
|
1140
1140
|
function renderValues() {
|
@@ -1190,7 +1190,7 @@ function ComboboxComponent(props) {
|
|
1190
1190
|
|
1191
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"};
|
1192
1192
|
|
1193
|
-
function DateTimePicker({ leftSection = jsxRuntimeExports.jsx(
|
1193
|
+
function DateTimePicker({ leftSection = jsxRuntimeExports.jsx(Icon.IconCalendar, { size: 20 }), ...props }) {
|
1194
1194
|
return jsxRuntimeExports.jsx(dates.DateTimePicker, { classNames: { ...styles$l, ...props.classNames }, style: { width: props.fullWidth ? '100%' : undefined }, ...props, leftSection: leftSection });
|
1195
1195
|
}
|
1196
1196
|
|
@@ -1214,7 +1214,7 @@ function DeleteActionIcon(props) {
|
|
1214
1214
|
}
|
1215
1215
|
};
|
1216
1216
|
// C. Render
|
1217
|
-
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, {}) }));
|
1218
1218
|
}
|
1219
1219
|
|
1220
1220
|
var styles$k = {"description":"styles-module_description__RBHPs"};
|
@@ -1254,7 +1254,7 @@ function FileButton({ accept, disabled, icon, label, loading, onCancel, onFileCh
|
|
1254
1254
|
};
|
1255
1255
|
//
|
1256
1256
|
// C. Render Components
|
1257
|
-
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 }));
|
1258
1258
|
}
|
1259
1259
|
|
1260
1260
|
var styles$j = {"label":"styles-module_label__eX438"};
|
@@ -1287,7 +1287,7 @@ Menu.Label = function MenuLabel(props) {
|
|
1287
1287
|
|
1288
1288
|
/* * */
|
1289
1289
|
function PasswordInput({ classNames, error, value, ...props }) {
|
1290
|
-
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 }));
|
1291
1291
|
}
|
1292
1292
|
|
1293
1293
|
var styles$h = {"root":"styles-module_root__vNUQ9","indicator":"styles-module_indicator__0XMRf","label":"styles-module_label__Mf1Ea"};
|
@@ -1350,7 +1350,7 @@ function Component({ classNames, error, validation, value, ...props }) {
|
|
1350
1350
|
}, [value]);
|
1351
1351
|
//
|
1352
1352
|
// C. Render components
|
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(
|
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) } }) }) }) }));
|
1354
1354
|
return (jsxRuntimeExports.jsx(core.TextInput, { classNames: classNames, error: error ? error : isValid ? '' : error, rightSection: props.tooltip && renderTooltip(props.tooltip), value: value, ...props }));
|
1355
1355
|
}
|
1356
1356
|
|
@@ -1505,7 +1505,7 @@ function DataTableHeader({ columns, }) {
|
|
1505
1505
|
const renderSortIcon = (column) => {
|
1506
1506
|
if (!column.sortable)
|
1507
1507
|
return null;
|
1508
|
-
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 })) }));
|
1509
1509
|
};
|
1510
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: {
|
1511
1511
|
maxWidth: column.width,
|
@@ -1588,6 +1588,14 @@ function useIsActivePage(href) {
|
|
1588
1588
|
return isActive;
|
1589
1589
|
}
|
1590
1590
|
|
1591
|
+
function generateIcon(name) {
|
1592
|
+
const IconComponent = Icon__namespace[name];
|
1593
|
+
if (!IconComponent) {
|
1594
|
+
return null;
|
1595
|
+
}
|
1596
|
+
return React.createElement(IconComponent);
|
1597
|
+
}
|
1598
|
+
|
1591
1599
|
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"};
|
1592
1600
|
|
1593
1601
|
function Sidebar({ items, }) {
|
@@ -1604,7 +1612,7 @@ function SidebarItem({ classNames, disabled, href, icon, label, }) {
|
|
1604
1612
|
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, {
|
1605
1613
|
[styles$7.disabled]: disabled,
|
1606
1614
|
[styles$7.selected]: isActive,
|
1607
|
-
}), children: icon }) }) }));
|
1615
|
+
}), children: typeof icon === 'string' ? generateIcon(icon) : icon }) }) }));
|
1608
1616
|
}
|
1609
1617
|
|
1610
1618
|
/* * */
|
@@ -1616,7 +1624,7 @@ function AppOptions() {
|
|
1616
1624
|
// B. Handle actions
|
1617
1625
|
//
|
1618
1626
|
// C. Render components
|
1619
|
-
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(
|
1627
|
+
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, {})] })] }));
|
1620
1628
|
//
|
1621
1629
|
}
|
1622
1630
|
|
@@ -1663,7 +1671,7 @@ function Section({ children, classNames, description, icon, title, titleAs = 'h2
|
|
1663
1671
|
const renderControl = () => {
|
1664
1672
|
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 })] }));
|
1665
1673
|
};
|
1666
|
-
return (jsxRuntimeExports.jsx(core.Accordion, { chevron: jsxRuntimeExports.jsx(
|
1674
|
+
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 })] }) }));
|
1667
1675
|
}
|
1668
1676
|
|
1669
1677
|
var styles$2 = {"root":"styles-module_root__gwoL6"};
|