lecom-ui 5.4.42 → 5.4.43
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.
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { useTranslation } from 'react-i18next';
|
|
2
3
|
import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
|
|
3
4
|
import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
5
|
+
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
|
|
4
6
|
import { Typography } from '../Typography/Typography.js';
|
|
5
7
|
|
|
6
8
|
function buildHeaderSelect({
|
|
@@ -35,7 +37,9 @@ function renderSortArrow({
|
|
|
35
37
|
externalColumn,
|
|
36
38
|
table
|
|
37
39
|
}) {
|
|
40
|
+
const { t } = useTranslation();
|
|
38
41
|
const sorted = column.getIsSorted();
|
|
42
|
+
const sortType = externalColumn.sortType || "numeric";
|
|
39
43
|
const handleClick = (event) => {
|
|
40
44
|
event.stopPropagation();
|
|
41
45
|
const sortingHandler = column.getToggleSortingHandler?.();
|
|
@@ -57,34 +61,43 @@ function renderSortArrow({
|
|
|
57
61
|
sortingHandler(event);
|
|
58
62
|
}
|
|
59
63
|
};
|
|
64
|
+
const getTooltipText = () => {
|
|
65
|
+
if (sorted === "asc") {
|
|
66
|
+
return sortType === "numeric" ? t("dataTable.sortDescendingNumeric") : t("dataTable.sortDescendingText");
|
|
67
|
+
}
|
|
68
|
+
if (sorted === "desc") {
|
|
69
|
+
return t("dataTable.sortDefault");
|
|
70
|
+
}
|
|
71
|
+
return sortType === "numeric" ? t("dataTable.sortAscendingNumeric") : t("dataTable.sortAscendingText");
|
|
72
|
+
};
|
|
60
73
|
if (sorted === "asc") {
|
|
61
|
-
return /* @__PURE__ */ React.createElement(
|
|
74
|
+
return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
62
75
|
ArrowUp,
|
|
63
76
|
{
|
|
64
77
|
size: 16,
|
|
65
78
|
className: "ml-1 text-grey-950 hover:cursor-pointer",
|
|
66
79
|
onClick: handleClick
|
|
67
80
|
}
|
|
68
|
-
);
|
|
81
|
+
)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
|
|
69
82
|
}
|
|
70
83
|
if (sorted === "desc") {
|
|
71
|
-
return /* @__PURE__ */ React.createElement(
|
|
84
|
+
return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
72
85
|
ArrowDown,
|
|
73
86
|
{
|
|
74
87
|
size: 16,
|
|
75
88
|
className: "ml-1 text-grey-950 hover:cursor-pointer",
|
|
76
89
|
onClick: handleClick
|
|
77
90
|
}
|
|
78
|
-
);
|
|
91
|
+
)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
|
|
79
92
|
}
|
|
80
|
-
return /* @__PURE__ */ React.createElement(
|
|
93
|
+
return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
81
94
|
ArrowUpDown,
|
|
82
95
|
{
|
|
83
96
|
size: 16,
|
|
84
97
|
className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
|
|
85
98
|
onClick: handleClick
|
|
86
99
|
}
|
|
87
|
-
);
|
|
100
|
+
)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
|
|
88
101
|
}
|
|
89
102
|
function createExpandToggle(row) {
|
|
90
103
|
return {
|
|
@@ -5,6 +5,7 @@ import { cn } from '../../lib/utils.js';
|
|
|
5
5
|
import { ChevronDown, MoreHorizontal, ChevronLast, ChevronRight, ChevronLeft, ChevronFirst } from 'lucide-react';
|
|
6
6
|
import { initializeI18n } from '../../i18n/index.js';
|
|
7
7
|
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
|
|
8
|
+
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
|
|
8
9
|
import { Typography } from '../Typography/Typography.js';
|
|
9
10
|
|
|
10
11
|
initializeI18n();
|
|
@@ -24,76 +25,88 @@ const PaginationFirst = ({
|
|
|
24
25
|
disabled,
|
|
25
26
|
isActive,
|
|
26
27
|
onClick
|
|
27
|
-
}) =>
|
|
28
|
-
|
|
29
|
-
{
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
28
|
+
}) => {
|
|
29
|
+
const { t } = useTranslation();
|
|
30
|
+
return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
31
|
+
Button,
|
|
32
|
+
{
|
|
33
|
+
disabled,
|
|
34
|
+
iconButton: true,
|
|
35
|
+
variant: "ghost",
|
|
36
|
+
color: "grey",
|
|
37
|
+
size: "small",
|
|
38
|
+
onClick,
|
|
39
|
+
className: cn(isActive && "bg-white", className)
|
|
40
|
+
},
|
|
41
|
+
/* @__PURE__ */ React.createElement(ChevronFirst, { size: 20 })
|
|
42
|
+
)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.firstPage"))));
|
|
43
|
+
};
|
|
40
44
|
PaginationFirst.displayName = "PaginationFirst";
|
|
41
45
|
const PaginationLast = ({
|
|
42
46
|
className,
|
|
43
47
|
disabled,
|
|
44
48
|
isActive,
|
|
45
49
|
onClick
|
|
46
|
-
}) =>
|
|
47
|
-
|
|
48
|
-
{
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
}) => {
|
|
51
|
+
const { t } = useTranslation();
|
|
52
|
+
return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
53
|
+
Button,
|
|
54
|
+
{
|
|
55
|
+
disabled,
|
|
56
|
+
iconButton: true,
|
|
57
|
+
variant: "ghost",
|
|
58
|
+
color: "grey",
|
|
59
|
+
size: "small",
|
|
60
|
+
onClick,
|
|
61
|
+
className: cn(isActive && "bg-white", className)
|
|
62
|
+
},
|
|
63
|
+
/* @__PURE__ */ React.createElement(ChevronLast, { size: 20 })
|
|
64
|
+
)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.lastPage"))));
|
|
65
|
+
};
|
|
59
66
|
PaginationLast.displayName = "PaginationLast";
|
|
60
67
|
const PaginationPrevious = ({
|
|
61
68
|
className,
|
|
62
69
|
disabled,
|
|
63
70
|
isActive,
|
|
64
71
|
onClick
|
|
65
|
-
}) =>
|
|
66
|
-
|
|
67
|
-
{
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
}) => {
|
|
73
|
+
const { t } = useTranslation();
|
|
74
|
+
return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
75
|
+
Button,
|
|
76
|
+
{
|
|
77
|
+
disabled,
|
|
78
|
+
iconButton: true,
|
|
79
|
+
variant: "ghost",
|
|
80
|
+
color: "grey",
|
|
81
|
+
size: "small",
|
|
82
|
+
onClick,
|
|
83
|
+
className: cn(isActive && "bg-white", className)
|
|
84
|
+
},
|
|
85
|
+
/* @__PURE__ */ React.createElement(ChevronLeft, { size: 20 })
|
|
86
|
+
)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.previousPage"))));
|
|
87
|
+
};
|
|
78
88
|
PaginationPrevious.displayName = "PaginationPrevious";
|
|
79
89
|
const PaginationNext = ({
|
|
80
90
|
className,
|
|
81
91
|
disabled,
|
|
82
92
|
isActive,
|
|
83
93
|
onClick
|
|
84
|
-
}) =>
|
|
85
|
-
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
94
|
+
}) => {
|
|
95
|
+
const { t } = useTranslation();
|
|
96
|
+
return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
97
|
+
Button,
|
|
98
|
+
{
|
|
99
|
+
disabled,
|
|
100
|
+
iconButton: true,
|
|
101
|
+
variant: "ghost",
|
|
102
|
+
color: "grey",
|
|
103
|
+
size: "small",
|
|
104
|
+
onClick,
|
|
105
|
+
className: cn(isActive && "bg-white", className)
|
|
106
|
+
},
|
|
107
|
+
/* @__PURE__ */ React.createElement(ChevronRight, { size: 20 })
|
|
108
|
+
)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.nextPage"))));
|
|
109
|
+
};
|
|
97
110
|
PaginationNext.displayName = "PaginationNext";
|
|
98
111
|
const PaginationEllipsis = ({
|
|
99
112
|
className,
|
|
@@ -11,10 +11,14 @@ const language = {
|
|
|
11
11
|
pagination: {
|
|
12
12
|
show: "Show:",
|
|
13
13
|
selectedProcess: "Item(s) selected",
|
|
14
|
-
selectedItemSingular: "item selected"
|
|
14
|
+
selectedItemSingular: "item selected",
|
|
15
|
+
firstPage: "First page",
|
|
16
|
+
lastPage: "Last page",
|
|
17
|
+
previousPage: "Back",
|
|
18
|
+
nextPage: "Forward"
|
|
15
19
|
},
|
|
16
20
|
upload: {
|
|
17
|
-
label: "Drag and drop the file here or click to select it
|
|
21
|
+
label: "Drag and drop the file here or click to select it",
|
|
18
22
|
download: "Download file",
|
|
19
23
|
remove: "Remove file"
|
|
20
24
|
},
|
|
@@ -24,6 +28,13 @@ const language = {
|
|
|
24
28
|
selectAll: "Select all",
|
|
25
29
|
placeholder: "Select",
|
|
26
30
|
create: "Create"
|
|
31
|
+
},
|
|
32
|
+
dataTable: {
|
|
33
|
+
sortAscendingNumeric: "Sort ascending",
|
|
34
|
+
sortDescendingNumeric: "Sort descending",
|
|
35
|
+
sortAscendingText: "Sort A-Z",
|
|
36
|
+
sortDescendingText: "Sort Z-A",
|
|
37
|
+
sortDefault: "Restore default"
|
|
27
38
|
}
|
|
28
39
|
}
|
|
29
40
|
};
|
|
@@ -11,10 +11,14 @@ const language = {
|
|
|
11
11
|
pagination: {
|
|
12
12
|
show: "Mostrar:",
|
|
13
13
|
selectedProcess: "Item(s) seleccionado(s)",
|
|
14
|
-
selectedItemSingular: "item seleccionado"
|
|
14
|
+
selectedItemSingular: "item seleccionado",
|
|
15
|
+
firstPage: "Primera p\xE1gina",
|
|
16
|
+
lastPage: "\xDAltima p\xE1gina",
|
|
17
|
+
previousPage: "Volver",
|
|
18
|
+
nextPage: "Avanzar"
|
|
15
19
|
},
|
|
16
20
|
upload: {
|
|
17
|
-
label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo
|
|
21
|
+
label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo",
|
|
18
22
|
remove: "Eliminar archivo",
|
|
19
23
|
download: "Descargar archivo"
|
|
20
24
|
},
|
|
@@ -24,6 +28,13 @@ const language = {
|
|
|
24
28
|
selectAll: "Seleccionar todo",
|
|
25
29
|
placeholder: "Seleccionar",
|
|
26
30
|
create: "Crear"
|
|
31
|
+
},
|
|
32
|
+
dataTable: {
|
|
33
|
+
sortAscendingNumeric: "Ordenar ascendente",
|
|
34
|
+
sortDescendingNumeric: "Ordenar descendente",
|
|
35
|
+
sortAscendingText: "Ordenar A-Z",
|
|
36
|
+
sortDescendingText: "Ordenar Z-A",
|
|
37
|
+
sortDefault: "Restaurar predeterminado"
|
|
27
38
|
}
|
|
28
39
|
}
|
|
29
40
|
};
|
|
@@ -11,10 +11,14 @@ const language = {
|
|
|
11
11
|
pagination: {
|
|
12
12
|
show: "Mostrar:",
|
|
13
13
|
selectedProcess: "Item(s) selecionado(s)",
|
|
14
|
-
selectedItemSingular: "item selecionado"
|
|
14
|
+
selectedItemSingular: "item selecionado",
|
|
15
|
+
firstPage: "Primeira p\xE1gina",
|
|
16
|
+
lastPage: "\xDAltima p\xE1gina",
|
|
17
|
+
previousPage: "Voltar",
|
|
18
|
+
nextPage: "Avan\xE7ar"
|
|
15
19
|
},
|
|
16
20
|
upload: {
|
|
17
|
-
label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo
|
|
21
|
+
label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo",
|
|
18
22
|
remove: "Remover arquivo",
|
|
19
23
|
download: "Baixar arquivo"
|
|
20
24
|
},
|
|
@@ -24,6 +28,13 @@ const language = {
|
|
|
24
28
|
selectAll: "Selecionar tudo",
|
|
25
29
|
placeholder: "Selecione",
|
|
26
30
|
create: "Criar"
|
|
31
|
+
},
|
|
32
|
+
dataTable: {
|
|
33
|
+
sortAscendingNumeric: "Ordenar crescente",
|
|
34
|
+
sortDescendingNumeric: "Ordenar decrescente",
|
|
35
|
+
sortAscendingText: "Ordenar A-Z",
|
|
36
|
+
sortDescendingText: "Ordenar Z-A",
|
|
37
|
+
sortDefault: "Restaurar padr\xE3o"
|
|
27
38
|
}
|
|
28
39
|
}
|
|
29
40
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -387,6 +387,7 @@ interface Column<TData, TValue> {
|
|
|
387
387
|
headerStyle?: React.CSSProperties;
|
|
388
388
|
cellClassName?: string;
|
|
389
389
|
showHeaderTooltip?: boolean;
|
|
390
|
+
sortType?: 'numeric' | 'text';
|
|
390
391
|
customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
|
|
391
392
|
render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
|
|
392
393
|
onSort?: ({ table, column }: ColumnSort<TData, TValue>) => 'asc' | 'desc' | null | void;
|
|
@@ -790,9 +791,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
|
|
|
790
791
|
}
|
|
791
792
|
|
|
792
793
|
declare const inputVariants: (props?: ({
|
|
793
|
-
variant?: "
|
|
794
|
-
size?: "small" | "
|
|
795
|
-
radius?: "small" | "
|
|
794
|
+
variant?: "filled" | "default" | "borderless" | null | undefined;
|
|
795
|
+
size?: "small" | "large" | "default" | null | undefined;
|
|
796
|
+
radius?: "small" | "large" | "default" | "full" | null | undefined;
|
|
796
797
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
797
798
|
interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
|
|
798
799
|
sufix?: React$1.ReactNode;
|
|
@@ -998,7 +999,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
|
|
|
998
999
|
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
999
1000
|
|
|
1000
1001
|
declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
|
|
1001
|
-
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLDivElement |
|
|
1002
|
+
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
|
|
1002
1003
|
className?: string;
|
|
1003
1004
|
collapsedSize?: number | undefined;
|
|
1004
1005
|
collapsible?: boolean | undefined;
|
|
@@ -1164,9 +1165,9 @@ declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
|
|
|
1164
1165
|
declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1165
1166
|
|
|
1166
1167
|
declare const textareaVariants: (props?: ({
|
|
1167
|
-
variant?: "
|
|
1168
|
-
size?: "small" | "
|
|
1169
|
-
radius?: "small" | "
|
|
1168
|
+
variant?: "filled" | "default" | "borderless" | null | undefined;
|
|
1169
|
+
size?: "small" | "large" | "default" | null | undefined;
|
|
1170
|
+
radius?: "small" | "large" | "default" | "full" | null | undefined;
|
|
1170
1171
|
resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
|
|
1171
1172
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1172
1173
|
interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
|
|
@@ -1356,7 +1357,7 @@ interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
1356
1357
|
declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1357
1358
|
|
|
1358
1359
|
declare const badgeVariants: (props?: ({
|
|
1359
|
-
variant?: "
|
|
1360
|
+
variant?: "destructive" | "default" | "outline" | "secondary" | null | undefined;
|
|
1360
1361
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1361
1362
|
interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
1362
1363
|
}
|