@mlw-packages/react-components 1.10.1 → 1.10.2
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.css +98 -4
- package/dist/index.d.mts +144 -27
- package/dist/index.d.ts +144 -27
- package/dist/index.js +739 -61
- package/dist/index.mjs +731 -64
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -9741,7 +9741,7 @@ function DayViewAgenda({
|
|
|
9741
9741
|
const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicatorAgenda(currentDate, "day");
|
|
9742
9742
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "contents", "data-slot": "day-view", children: [
|
|
9743
9743
|
showAllDaySection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border/70 border-t bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]", children: [
|
|
9744
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "
|
|
9744
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r flex items-center justify-center p-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[10px] text-muted-foreground/70 sm:text-xs", children: "Todo Dia" }) }),
|
|
9745
9745
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r p-1 last:border-r-0", children: allDayEvents.map((event) => {
|
|
9746
9746
|
const eventStart = getEventStartDate(event);
|
|
9747
9747
|
const eventEnd = getEventEndDate(event) ?? getEventStartDate(event);
|
|
@@ -10129,7 +10129,8 @@ function EventAgenda({
|
|
|
10129
10129
|
className,
|
|
10130
10130
|
initialView = "month",
|
|
10131
10131
|
initialDate,
|
|
10132
|
-
onClick
|
|
10132
|
+
onClick,
|
|
10133
|
+
showYearView = false
|
|
10133
10134
|
}) {
|
|
10134
10135
|
const [currentDate, setCurrentDate] = React32.useState(
|
|
10135
10136
|
initialDate && new Date(initialDate) || /* @__PURE__ */ new Date()
|
|
@@ -10142,6 +10143,7 @@ function EventAgenda({
|
|
|
10142
10143
|
else if (view === "day") setCurrentDate((d) => dateFns.addDays(d, -1));
|
|
10143
10144
|
else if (view === "agenda")
|
|
10144
10145
|
setCurrentDate((d) => dateFns.addDays(d, -AgendaDaysToShowAgenda));
|
|
10146
|
+
else if (view === "year") setCurrentDate((d) => dateFns.subYears(d, 1));
|
|
10145
10147
|
};
|
|
10146
10148
|
const goNext = () => {
|
|
10147
10149
|
if (view === "month") setCurrentDate((d) => dateFns.addMonths(d, 1));
|
|
@@ -10149,6 +10151,7 @@ function EventAgenda({
|
|
|
10149
10151
|
else if (view === "day") setCurrentDate((d) => dateFns.addDays(d, 1));
|
|
10150
10152
|
else if (view === "agenda")
|
|
10151
10153
|
setCurrentDate((d) => dateFns.addDays(d, AgendaDaysToShowAgenda));
|
|
10154
|
+
else if (view === "year") setCurrentDate((d) => dateFns.addYears(d, 1));
|
|
10152
10155
|
};
|
|
10153
10156
|
const handleEventSelect = (event, e) => {
|
|
10154
10157
|
try {
|
|
@@ -10186,7 +10189,8 @@ function EventAgenda({
|
|
|
10186
10189
|
month: { full: "M\xEAs", short: "M" },
|
|
10187
10190
|
week: { full: "Semana", short: "S" },
|
|
10188
10191
|
day: { full: "Dia", short: "D" },
|
|
10189
|
-
agenda: { full: "Agenda", short: "A" }
|
|
10192
|
+
agenda: { full: "Agenda", short: "A" },
|
|
10193
|
+
year: { full: "Ano", short: "An" }
|
|
10190
10194
|
};
|
|
10191
10195
|
const entry = labels[v] || { full: v, short: v };
|
|
10192
10196
|
return condensed ? entry.short : entry.full;
|
|
@@ -10210,12 +10214,18 @@ function EventAgenda({
|
|
|
10210
10214
|
const start = currentDate;
|
|
10211
10215
|
return capitalize2(dateFns.format(start, "MMMM yyyy", { locale: locale.ptBR }));
|
|
10212
10216
|
}
|
|
10217
|
+
if (view === "year") {
|
|
10218
|
+
return dateFns.format(currentDate, "yyyy");
|
|
10219
|
+
}
|
|
10213
10220
|
return capitalize2(dateFns.format(currentDate, "MMMM yyyy", { locale: locale.ptBR }));
|
|
10214
10221
|
}, [currentDate, view]);
|
|
10215
|
-
const
|
|
10216
|
-
|
|
10217
|
-
|
|
10218
|
-
|
|
10222
|
+
const availableViews = showYearView ? ["year", "month", "week", "day", "agenda"] : ["month", "week", "day", "agenda"];
|
|
10223
|
+
const selectItems = availableViews.map(
|
|
10224
|
+
(v) => ({
|
|
10225
|
+
label: viewLabel(v),
|
|
10226
|
+
value: v
|
|
10227
|
+
})
|
|
10228
|
+
);
|
|
10219
10229
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10220
10230
|
"div",
|
|
10221
10231
|
{
|
|
@@ -10270,46 +10280,51 @@ function EventAgenda({
|
|
|
10270
10280
|
}
|
|
10271
10281
|
) })
|
|
10272
10282
|
] }),
|
|
10273
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10274
|
-
"
|
|
10275
|
-
|
|
10276
|
-
|
|
10277
|
-
|
|
10278
|
-
|
|
10279
|
-
|
|
10280
|
-
|
|
10281
|
-
|
|
10282
|
-
|
|
10283
|
-
|
|
10284
|
-
|
|
10285
|
-
|
|
10286
|
-
|
|
10287
|
-
|
|
10288
|
-
|
|
10289
|
-
|
|
10290
|
-
|
|
10291
|
-
|
|
10292
|
-
|
|
10293
|
-
|
|
10294
|
-
|
|
10295
|
-
|
|
10296
|
-
|
|
10297
|
-
|
|
10298
|
-
|
|
10299
|
-
|
|
10300
|
-
|
|
10301
|
-
|
|
10302
|
-
|
|
10303
|
-
|
|
10304
|
-
|
|
10305
|
-
|
|
10306
|
-
|
|
10307
|
-
|
|
10308
|
-
|
|
10309
|
-
|
|
10310
|
-
|
|
10311
|
-
|
|
10312
|
-
|
|
10283
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col transition-all duration-200 ease-in-out", children: [
|
|
10284
|
+
view === "month" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10285
|
+
MonthViewAgenda,
|
|
10286
|
+
{
|
|
10287
|
+
currentDate,
|
|
10288
|
+
events,
|
|
10289
|
+
onEventSelect: handleEventSelect
|
|
10290
|
+
}
|
|
10291
|
+
),
|
|
10292
|
+
view === "week" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10293
|
+
WeekViewAgenda,
|
|
10294
|
+
{
|
|
10295
|
+
currentDate,
|
|
10296
|
+
events,
|
|
10297
|
+
onEventSelect: handleEventSelect
|
|
10298
|
+
}
|
|
10299
|
+
),
|
|
10300
|
+
view === "day" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10301
|
+
DayViewAgenda,
|
|
10302
|
+
{
|
|
10303
|
+
currentDate,
|
|
10304
|
+
events,
|
|
10305
|
+
onEventSelect: handleEventSelect
|
|
10306
|
+
}
|
|
10307
|
+
),
|
|
10308
|
+
view === "agenda" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10309
|
+
Agenda,
|
|
10310
|
+
{
|
|
10311
|
+
currentDate,
|
|
10312
|
+
events,
|
|
10313
|
+
onEventSelect: handleEventSelect
|
|
10314
|
+
}
|
|
10315
|
+
),
|
|
10316
|
+
view === "year" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10317
|
+
YearViewAgenda,
|
|
10318
|
+
{
|
|
10319
|
+
currentDate,
|
|
10320
|
+
events,
|
|
10321
|
+
onMonthSelect: (monthDate) => {
|
|
10322
|
+
setCurrentDate(monthDate);
|
|
10323
|
+
setView("month");
|
|
10324
|
+
}
|
|
10325
|
+
}
|
|
10326
|
+
)
|
|
10327
|
+
] })
|
|
10313
10328
|
] }),
|
|
10314
10329
|
selectedEvent && React32__namespace.default.isValidElement(onClick) ? React32__namespace.default.cloneElement(onClick, {
|
|
10315
10330
|
event: selectedEvent,
|
|
@@ -10384,11 +10399,13 @@ function useEventVisibilityAgenda({
|
|
|
10384
10399
|
const getVisibleEventCount = React32.useMemo(() => {
|
|
10385
10400
|
return (totalEvents) => {
|
|
10386
10401
|
if (!contentHeight) return totalEvents;
|
|
10387
|
-
const
|
|
10388
|
-
|
|
10402
|
+
const availableHeight = contentHeight + eventGap + 4;
|
|
10403
|
+
const slotHeight = eventHeight + eventGap;
|
|
10404
|
+
const maxSlots = Math.floor(availableHeight / slotHeight);
|
|
10405
|
+
if (totalEvents <= maxSlots) {
|
|
10389
10406
|
return totalEvents;
|
|
10390
10407
|
}
|
|
10391
|
-
return
|
|
10408
|
+
return maxSlots > 0 ? maxSlots - 1 : 0;
|
|
10392
10409
|
};
|
|
10393
10410
|
}, [contentHeight, eventHeight, eventGap]);
|
|
10394
10411
|
return {
|
|
@@ -10705,7 +10722,7 @@ function MonthViewAgenda({
|
|
|
10705
10722
|
"div",
|
|
10706
10723
|
{
|
|
10707
10724
|
ref: isReferenceCell ? contentRef : null,
|
|
10708
|
-
className: "min-h-[calc((var(--event-height)+var(--event-gap))*2)] sm:min-h-[calc((var(--event-height)+var(--event-gap))*3)] lg:min-h-[calc((var(--event-height)+var(--event-gap))*4)] px-1 py-
|
|
10725
|
+
className: "flex-1 min-h-[calc((var(--event-height)+var(--event-gap))*2)] sm:min-h-[calc((var(--event-height)+var(--event-gap))*3)] lg:min-h-[calc((var(--event-height)+var(--event-gap))*4)] px-1 py-1",
|
|
10709
10726
|
children: [
|
|
10710
10727
|
Array.from({ length: dayMultiDayRowCount }).map(
|
|
10711
10728
|
(_, si) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -10766,7 +10783,7 @@ function MonthViewAgenda({
|
|
|
10766
10783
|
type: "button",
|
|
10767
10784
|
onClick: (e) => e.stopPropagation(),
|
|
10768
10785
|
"aria-label": `Mostrar mais ${remainingCount} eventos`,
|
|
10769
|
-
className: "mt-
|
|
10786
|
+
className: "mt-auto flex h-[var(--event-height)] w-full select-none items-center overflow-hidden px-2 text-left text-[10px] text-muted-foreground outline-none rounded-md transition hover:bg-muted/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:text-xs",
|
|
10770
10787
|
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
|
|
10771
10788
|
"+ ",
|
|
10772
10789
|
remainingCount,
|
|
@@ -11109,7 +11126,7 @@ function WeekViewAgenda({
|
|
|
11109
11126
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", "data-slot": "week-view", children: [
|
|
11110
11127
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-[600px] sm:min-w-full flex flex-col h-full", children: [
|
|
11111
11128
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-30 grid grid-cols-8 border-border/70 border-b bg-background", children: [
|
|
11112
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 text-center text-muted-foreground/70 text-[10px] sm:text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "
|
|
11129
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 text-center text-muted-foreground/70 text-[10px] sm:text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: "Hor\xE1rios" }) }),
|
|
11113
11130
|
days.map((day) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11114
11131
|
"div",
|
|
11115
11132
|
{
|
|
@@ -11122,7 +11139,7 @@ function WeekViewAgenda({
|
|
|
11122
11139
|
dateFns.format(day, "d", { locale: locale.ptBR })
|
|
11123
11140
|
] }),
|
|
11124
11141
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline md:hidden", children: dateFns.format(day, "EEE d", { locale: locale.ptBR }) }),
|
|
11125
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "
|
|
11142
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: dateFns.format(day, "EEE dd", { locale: locale.ptBR }) })
|
|
11126
11143
|
]
|
|
11127
11144
|
},
|
|
11128
11145
|
day.toString()
|
|
@@ -11130,7 +11147,7 @@ function WeekViewAgenda({
|
|
|
11130
11147
|
] }),
|
|
11131
11148
|
showAllDaySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/70 border-b bg-muted/50", children: [
|
|
11132
11149
|
trueAllDayEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-8", children: [
|
|
11133
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "
|
|
11150
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r flex items-center justify-center p-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[10px] text-muted-foreground/70 sm:text-xs", children: "Todo dia" }) }),
|
|
11134
11151
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11135
11152
|
"div",
|
|
11136
11153
|
{
|
|
@@ -11210,7 +11227,7 @@ function WeekViewAgenda({
|
|
|
11210
11227
|
trueAllDayEvents.length > 0 && "border-t border-border/40"
|
|
11211
11228
|
),
|
|
11212
11229
|
children: [
|
|
11213
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "
|
|
11230
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r flex items-center justify-center p-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[10px] text-muted-foreground/70 sm:text-xs", children: "Evento" }) }),
|
|
11214
11231
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11215
11232
|
"div",
|
|
11216
11233
|
{
|
|
@@ -11429,6 +11446,86 @@ function WeekViewAgenda({
|
|
|
11429
11446
|
)
|
|
11430
11447
|
] });
|
|
11431
11448
|
}
|
|
11449
|
+
function YearViewAgenda({
|
|
11450
|
+
currentDate,
|
|
11451
|
+
events,
|
|
11452
|
+
onMonthSelect
|
|
11453
|
+
}) {
|
|
11454
|
+
const start = dateFns.startOfYear(currentDate);
|
|
11455
|
+
const end = dateFns.endOfYear(currentDate);
|
|
11456
|
+
const months = React32.useMemo(() => {
|
|
11457
|
+
return dateFns.eachMonthOfInterval({ start, end });
|
|
11458
|
+
}, [start, end]);
|
|
11459
|
+
const eventDates = React32.useMemo(() => {
|
|
11460
|
+
return new Set(
|
|
11461
|
+
events.map((e) => getEventStartDate(e)).filter((d) => !!d).map((d) => dateFns.format(d, "yyyy-MM-dd"))
|
|
11462
|
+
);
|
|
11463
|
+
}, [events]);
|
|
11464
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-1 overflow-y-auto max-h-[calc(100vh-200px)] lg:max-h-[750px] scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent", children: months.map((month) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11465
|
+
"div",
|
|
11466
|
+
{
|
|
11467
|
+
className: "flex flex-col p-4 rounded-lg border border-border/70 bg-card hover:bg-muted/5 transition-colors cursor-pointer group",
|
|
11468
|
+
onClick: () => onMonthSelect(month),
|
|
11469
|
+
children: [
|
|
11470
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
|
|
11471
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm capitalize text-foreground group-hover:text-primary transition-colors", children: dateFns.format(month, "MMMM", { locale: locale.ptBR }) }),
|
|
11472
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground/50 uppercase tracking-wider opacity-0 group-hover:opacity-100 transition-opacity", children: "Detalhes" })
|
|
11473
|
+
] }),
|
|
11474
|
+
/* @__PURE__ */ jsxRuntime.jsx(MonthMiniGrid, { month, eventDates })
|
|
11475
|
+
]
|
|
11476
|
+
},
|
|
11477
|
+
month.toString()
|
|
11478
|
+
)) });
|
|
11479
|
+
}
|
|
11480
|
+
function MonthMiniGrid({
|
|
11481
|
+
month,
|
|
11482
|
+
eventDates
|
|
11483
|
+
}) {
|
|
11484
|
+
const days = React32.useMemo(() => {
|
|
11485
|
+
const monthStart = dateFns.startOfMonth(month);
|
|
11486
|
+
const calendarStart = dateFns.startOfWeek(monthStart, { weekStartsOn: 0 });
|
|
11487
|
+
const daysArr = [];
|
|
11488
|
+
const curr = new Date(calendarStart);
|
|
11489
|
+
for (let i = 0; i < 42; i++) {
|
|
11490
|
+
daysArr.push(new Date(curr));
|
|
11491
|
+
curr.setDate(curr.getDate() + 1);
|
|
11492
|
+
}
|
|
11493
|
+
return daysArr;
|
|
11494
|
+
}, [month]);
|
|
11495
|
+
const weekdays = ["D", "S", "T", "Q", "Q", "S", "S"];
|
|
11496
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-y-1 text-[11px]", children: [
|
|
11497
|
+
weekdays.map((wd, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
11498
|
+
"div",
|
|
11499
|
+
{
|
|
11500
|
+
className: "text-center font-medium text-muted-foreground/70 py-1",
|
|
11501
|
+
children: wd
|
|
11502
|
+
},
|
|
11503
|
+
`${wd}-${i}`
|
|
11504
|
+
)),
|
|
11505
|
+
days.map((day) => {
|
|
11506
|
+
const isCurrentMonth = day.getMonth() === month.getMonth();
|
|
11507
|
+
const dateStr = dateFns.format(day, "yyyy-MM-dd");
|
|
11508
|
+
const hasEvent = eventDates.has(dateStr);
|
|
11509
|
+
const isDayToday = dateFns.isToday(day);
|
|
11510
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11511
|
+
"div",
|
|
11512
|
+
{
|
|
11513
|
+
className: cn(
|
|
11514
|
+
"relative flex items-center justify-center p-1 rounded-sm aspect-square transition-colors",
|
|
11515
|
+
!isCurrentMonth && "opacity-0 pointer-events-none",
|
|
11516
|
+
isDayToday && "bg-blue-500 text-white font-semibold rounded-lg",
|
|
11517
|
+
isCurrentMonth && !isDayToday && "hover:bg-muted/50 text-foreground"
|
|
11518
|
+
),
|
|
11519
|
+
children: [
|
|
11520
|
+
isCurrentMonth && dateFns.format(day, "d"),
|
|
11521
|
+
isCurrentMonth && hasEvent && !isDayToday && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-blue-500" })
|
|
11522
|
+
]
|
|
11523
|
+
},
|
|
11524
|
+
day.toString()
|
|
11525
|
+
);
|
|
11526
|
+
})
|
|
11527
|
+
] });
|
|
11528
|
+
}
|
|
11432
11529
|
var colorBannerMap = {
|
|
11433
11530
|
sky: "from-sky-400 via-sky-500 to-cyan-500",
|
|
11434
11531
|
amber: "from-amber-400 via-amber-500 to-orange-400",
|
|
@@ -14802,8 +14899,8 @@ var createValueFormatter = (customFormatter, formatBR) => {
|
|
|
14802
14899
|
});
|
|
14803
14900
|
const prefixFormats = ["R$", "$", "\u20AC", "\xA3"];
|
|
14804
14901
|
const suffixFormats = ["%", "kg", "km", "m", "L", "un", "t", "h", "min", "s"];
|
|
14805
|
-
const getFormattedValue = (baseValue,
|
|
14806
|
-
const trimmedFormat =
|
|
14902
|
+
const getFormattedValue = (baseValue, format21) => {
|
|
14903
|
+
const trimmedFormat = format21.trim();
|
|
14807
14904
|
if (prefixFormats.includes(trimmedFormat)) {
|
|
14808
14905
|
return `${trimmedFormat} ${baseValue}`;
|
|
14809
14906
|
}
|
|
@@ -14828,8 +14925,8 @@ var createValueFormatter = (customFormatter, formatBR) => {
|
|
|
14828
14925
|
num = Number.isNaN(parsed) ? NaN : parsed;
|
|
14829
14926
|
}
|
|
14830
14927
|
const baseFormatted = formatBR && !Number.isNaN(num) ? nf.format(num) : String(formattedValue ?? value ?? "");
|
|
14831
|
-
const
|
|
14832
|
-
return
|
|
14928
|
+
const format21 = propsDataKey && formatterMap[propsDataKey] ? formatterMap[propsDataKey] : "";
|
|
14929
|
+
return format21 ? getFormattedValue(baseFormatted, format21) : baseFormatted;
|
|
14833
14930
|
};
|
|
14834
14931
|
}
|
|
14835
14932
|
if (typeof customFormatter === "function") {
|
|
@@ -16481,8 +16578,578 @@ var SystemTooltip = ({
|
|
|
16481
16578
|
) });
|
|
16482
16579
|
};
|
|
16483
16580
|
var SystemTooltip_default = SystemTooltip;
|
|
16581
|
+
var useIsTruncated = (ref) => {
|
|
16582
|
+
const [truncated, setTruncated] = React32.useState(false);
|
|
16583
|
+
React32.useEffect(() => {
|
|
16584
|
+
const el = ref.current;
|
|
16585
|
+
if (!el) return;
|
|
16586
|
+
const check = () => setTruncated(el.scrollWidth > el.offsetWidth);
|
|
16587
|
+
check();
|
|
16588
|
+
const ro = new ResizeObserver(check);
|
|
16589
|
+
ro.observe(el);
|
|
16590
|
+
return () => ro.disconnect();
|
|
16591
|
+
}, [ref]);
|
|
16592
|
+
return truncated;
|
|
16593
|
+
};
|
|
16594
|
+
var NameTooltip = ({
|
|
16595
|
+
name,
|
|
16596
|
+
description
|
|
16597
|
+
}) => {
|
|
16598
|
+
const nameRef = React32.useRef(null);
|
|
16599
|
+
const descRef = React32.useRef(null);
|
|
16600
|
+
const isNameTruncated = useIsTruncated(nameRef);
|
|
16601
|
+
const isDescTruncated = useIsTruncated(descRef);
|
|
16602
|
+
const showTooltip = isNameTruncated || isDescTruncated;
|
|
16603
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
16604
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cursor-default", children: [
|
|
16605
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
16606
|
+
"h3",
|
|
16607
|
+
{
|
|
16608
|
+
ref: nameRef,
|
|
16609
|
+
className: "text-xl font-bold text-foreground tracking-tight truncate",
|
|
16610
|
+
children: name
|
|
16611
|
+
}
|
|
16612
|
+
),
|
|
16613
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
16614
|
+
"p",
|
|
16615
|
+
{
|
|
16616
|
+
ref: descRef,
|
|
16617
|
+
className: "text-xs text-foreground/70 truncate mt-0.5",
|
|
16618
|
+
children: description
|
|
16619
|
+
}
|
|
16620
|
+
)
|
|
16621
|
+
] }) }),
|
|
16622
|
+
showTooltip && /* @__PURE__ */ jsxRuntime.jsxs(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: [
|
|
16623
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: name }),
|
|
16624
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-foreground/70 mt-0.5", children: description })
|
|
16625
|
+
] })
|
|
16626
|
+
] }) });
|
|
16627
|
+
};
|
|
16628
|
+
var SystemNode = ({ label }) => {
|
|
16629
|
+
const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
|
|
16630
|
+
const needsTooltip = label.length > 9;
|
|
16631
|
+
const circle = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[76px] h-[76px] rounded-full bg-primary flex items-center justify-center shrink-0 z-10 cursor-default", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated }) });
|
|
16632
|
+
if (!needsTooltip) return circle;
|
|
16633
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
16634
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: circle }),
|
|
16635
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: label })
|
|
16636
|
+
] }) });
|
|
16637
|
+
};
|
|
16638
|
+
var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
|
|
16639
|
+
const gradientId = React32.useId();
|
|
16640
|
+
const [pathD, setPathD] = React32.useState("");
|
|
16641
|
+
const [svgSize, setSvgSize] = React32.useState({ w: 0, h: 0 });
|
|
16642
|
+
React32.useEffect(() => {
|
|
16643
|
+
let rafId;
|
|
16644
|
+
const update = () => {
|
|
16645
|
+
const container = containerRef.current;
|
|
16646
|
+
const left = leftRef.current;
|
|
16647
|
+
const right = rightRef.current;
|
|
16648
|
+
if (!container || !left || !right) return;
|
|
16649
|
+
const cr = container.getBoundingClientRect();
|
|
16650
|
+
const lr = left.getBoundingClientRect();
|
|
16651
|
+
const rr = right.getBoundingClientRect();
|
|
16652
|
+
const cx1 = lr.left - cr.left + lr.width / 2;
|
|
16653
|
+
const cy1 = lr.top - cr.top + lr.height / 2;
|
|
16654
|
+
const cx2 = rr.left - cr.left + rr.width / 2;
|
|
16655
|
+
const cy2 = rr.top - cr.top + rr.height / 2;
|
|
16656
|
+
const dx = cx2 - cx1, dy = cy2 - cy1;
|
|
16657
|
+
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
16658
|
+
if (dist === 0) return;
|
|
16659
|
+
const ux = dx / dist, uy = dy / dist;
|
|
16660
|
+
const r1 = lr.width / 2;
|
|
16661
|
+
const r2 = rr.width / 2;
|
|
16662
|
+
setSvgSize({ w: cr.width, h: cr.height });
|
|
16663
|
+
setPathD(
|
|
16664
|
+
`M ${cx1 + ux * r1},${cy1 + uy * r1} L ${cx2 - ux * r2},${cy2 - uy * r2}`
|
|
16665
|
+
);
|
|
16666
|
+
};
|
|
16667
|
+
const schedule = () => {
|
|
16668
|
+
cancelAnimationFrame(rafId);
|
|
16669
|
+
rafId = requestAnimationFrame(update);
|
|
16670
|
+
};
|
|
16671
|
+
requestAnimationFrame(() => requestAnimationFrame(update));
|
|
16672
|
+
schedule();
|
|
16673
|
+
const ro = new ResizeObserver(schedule);
|
|
16674
|
+
if (containerRef.current) ro.observe(containerRef.current);
|
|
16675
|
+
if (leftRef.current) ro.observe(leftRef.current);
|
|
16676
|
+
if (rightRef.current) ro.observe(rightRef.current);
|
|
16677
|
+
const mo = new MutationObserver(schedule);
|
|
16678
|
+
mo.observe(document.documentElement, {
|
|
16679
|
+
attributes: true,
|
|
16680
|
+
attributeFilter: ["class", "style"]
|
|
16681
|
+
});
|
|
16682
|
+
mo.observe(document.body, {
|
|
16683
|
+
attributes: true,
|
|
16684
|
+
attributeFilter: ["class", "style"]
|
|
16685
|
+
});
|
|
16686
|
+
return () => {
|
|
16687
|
+
cancelAnimationFrame(rafId);
|
|
16688
|
+
ro.disconnect();
|
|
16689
|
+
mo.disconnect();
|
|
16690
|
+
};
|
|
16691
|
+
}, [containerRef, leftRef, rightRef]);
|
|
16692
|
+
const animX1 = isInput ? ["90%", "-10%"] : ["10%", "110%"];
|
|
16693
|
+
const animX2 = isInput ? ["100%", "0%"] : ["0%", "100%"];
|
|
16694
|
+
if (!pathD) return null;
|
|
16695
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
16696
|
+
"svg",
|
|
16697
|
+
{
|
|
16698
|
+
className: "pointer-events-none absolute left-0 top-0",
|
|
16699
|
+
width: svgSize.w,
|
|
16700
|
+
height: svgSize.h,
|
|
16701
|
+
fill: "none",
|
|
16702
|
+
children: [
|
|
16703
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
16704
|
+
"path",
|
|
16705
|
+
{
|
|
16706
|
+
d: pathD,
|
|
16707
|
+
className: "stroke-primary",
|
|
16708
|
+
strokeWidth: 2,
|
|
16709
|
+
strokeOpacity: 0.2,
|
|
16710
|
+
strokeLinecap: "round"
|
|
16711
|
+
}
|
|
16712
|
+
),
|
|
16713
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
16714
|
+
framerMotion.motion.path,
|
|
16715
|
+
{
|
|
16716
|
+
d: pathD,
|
|
16717
|
+
stroke: `url(#${gradientId})`,
|
|
16718
|
+
strokeWidth: 2,
|
|
16719
|
+
strokeLinecap: "round",
|
|
16720
|
+
initial: { strokeOpacity: 0 },
|
|
16721
|
+
animate: { strokeOpacity: 1 },
|
|
16722
|
+
transition: { duration: 1 }
|
|
16723
|
+
}
|
|
16724
|
+
),
|
|
16725
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
16726
|
+
framerMotion.motion.linearGradient,
|
|
16727
|
+
{
|
|
16728
|
+
id: gradientId,
|
|
16729
|
+
gradientUnits: "userSpaceOnUse",
|
|
16730
|
+
initial: { x1: "0%", x2: "0%", y1: "0%", y2: "0%" },
|
|
16731
|
+
animate: {
|
|
16732
|
+
x1: animX1,
|
|
16733
|
+
x2: animX2,
|
|
16734
|
+
y1: ["0%", "0%"],
|
|
16735
|
+
y2: ["0%", "0%"]
|
|
16736
|
+
},
|
|
16737
|
+
transition: {
|
|
16738
|
+
duration: 4,
|
|
16739
|
+
ease: [0.16, 1, 0.3, 1],
|
|
16740
|
+
repeat: Infinity,
|
|
16741
|
+
repeatDelay: 0
|
|
16742
|
+
},
|
|
16743
|
+
children: [
|
|
16744
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "hsl(var(--primary))", stopOpacity: "0" }),
|
|
16745
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "hsl(var(--primary))" }),
|
|
16746
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "32.5%", stopColor: "hsl(var(--primary))" }),
|
|
16747
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "hsl(var(--primary))", stopOpacity: "0" })
|
|
16748
|
+
]
|
|
16749
|
+
}
|
|
16750
|
+
) })
|
|
16751
|
+
]
|
|
16752
|
+
}
|
|
16753
|
+
);
|
|
16754
|
+
};
|
|
16755
|
+
var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
|
|
16756
|
+
const containerRef = React32.useRef(null);
|
|
16757
|
+
const leftRef = React32.useRef(null);
|
|
16758
|
+
const rightRef = React32.useRef(null);
|
|
16759
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
16760
|
+
"div",
|
|
16761
|
+
{
|
|
16762
|
+
ref: containerRef,
|
|
16763
|
+
className: "relative flex items-center justify-between py-1 px-3",
|
|
16764
|
+
children: [
|
|
16765
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: leftRef, children: /* @__PURE__ */ jsxRuntime.jsx(SystemNode, { label: isInput ? externalSystem : currentSystem }) }),
|
|
16766
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: rightRef, children: /* @__PURE__ */ jsxRuntime.jsx(SystemNode, { label: isInput ? currentSystem : externalSystem }) }),
|
|
16767
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
16768
|
+
Beam,
|
|
16769
|
+
{
|
|
16770
|
+
isInput,
|
|
16771
|
+
containerRef,
|
|
16772
|
+
leftRef,
|
|
16773
|
+
rightRef
|
|
16774
|
+
}
|
|
16775
|
+
)
|
|
16776
|
+
]
|
|
16777
|
+
}
|
|
16778
|
+
);
|
|
16779
|
+
};
|
|
16780
|
+
var CopyData = ({ value }) => {
|
|
16781
|
+
const [copied, setCopied] = React32.useState(false);
|
|
16782
|
+
const handleCopy = React32.useCallback(() => {
|
|
16783
|
+
navigator.clipboard.writeText(value).then(() => {
|
|
16784
|
+
setCopied(true);
|
|
16785
|
+
setTimeout(() => setCopied(false), 1500);
|
|
16786
|
+
});
|
|
16787
|
+
}, [value]);
|
|
16788
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
16789
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
16790
|
+
"button",
|
|
16791
|
+
{
|
|
16792
|
+
onClick: handleCopy,
|
|
16793
|
+
className: "shrink-0 p-0.5 rounded transition-colors text-muted-foreground/40 hover:text-foreground hover:bg-muted",
|
|
16794
|
+
style: { cursor: "pointer" },
|
|
16795
|
+
children: copied ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
16796
|
+
"path",
|
|
16797
|
+
{
|
|
16798
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
16799
|
+
stroke: "currentColor",
|
|
16800
|
+
strokeWidth: "2",
|
|
16801
|
+
strokeLinecap: "round",
|
|
16802
|
+
strokeLinejoin: "round"
|
|
16803
|
+
}
|
|
16804
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", children: [
|
|
16805
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
16806
|
+
"rect",
|
|
16807
|
+
{
|
|
16808
|
+
x: "5",
|
|
16809
|
+
y: "5",
|
|
16810
|
+
width: "8",
|
|
16811
|
+
height: "9",
|
|
16812
|
+
rx: "1.5",
|
|
16813
|
+
stroke: "currentColor",
|
|
16814
|
+
strokeWidth: "1.5"
|
|
16815
|
+
}
|
|
16816
|
+
),
|
|
16817
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
16818
|
+
"path",
|
|
16819
|
+
{
|
|
16820
|
+
d: "M3 11V3.5A1.5 1.5 0 0 1 4.5 2H11",
|
|
16821
|
+
stroke: "currentColor",
|
|
16822
|
+
strokeWidth: "1.5",
|
|
16823
|
+
strokeLinecap: "round"
|
|
16824
|
+
}
|
|
16825
|
+
)
|
|
16826
|
+
] })
|
|
16827
|
+
}
|
|
16828
|
+
) }),
|
|
16829
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 6, className: "z-[10001]", children: copied ? "Copiado!" : "Copiar" })
|
|
16830
|
+
] }) });
|
|
16831
|
+
};
|
|
16832
|
+
var propertyLabels = {
|
|
16833
|
+
Nome: "Nome",
|
|
16834
|
+
tipo: "Tipo",
|
|
16835
|
+
Tipo: "Tipo",
|
|
16836
|
+
Protocolos: "Protocolos",
|
|
16837
|
+
Ambiente: "Ambiente",
|
|
16838
|
+
Setor: "Setor",
|
|
16839
|
+
Contato: "Contato",
|
|
16840
|
+
Sustentacao: "Sustenta\xE7\xE3o",
|
|
16841
|
+
Destino: "Destino",
|
|
16842
|
+
Origem: "Origem"
|
|
16843
|
+
};
|
|
16844
|
+
var IntegrationCard = ({ title, details }) => {
|
|
16845
|
+
const titleRef = React32.useRef(null);
|
|
16846
|
+
const isTitleTruncated = useIsTruncated(titleRef);
|
|
16847
|
+
const blackList = ["id", "elementId", "identity"];
|
|
16848
|
+
const entries = details ? Object.entries(details).filter(
|
|
16849
|
+
([key, value]) => value !== void 0 && value !== null && value !== "" && !blackList.includes(key)
|
|
16850
|
+
) : [];
|
|
16851
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-border/40 bg-muted/20 overflow-hidden", children: [
|
|
16852
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border/30", children: [
|
|
16853
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
16854
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
16855
|
+
"span",
|
|
16856
|
+
{
|
|
16857
|
+
ref: titleRef,
|
|
16858
|
+
className: "text-sm font-bold text-foreground truncate flex-1 cursor-default",
|
|
16859
|
+
children: title
|
|
16860
|
+
}
|
|
16861
|
+
) }),
|
|
16862
|
+
isTitleTruncated && /* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 6, className: "z-[10001]", children: title })
|
|
16863
|
+
] }) }),
|
|
16864
|
+
entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
16865
|
+
CopyData,
|
|
16866
|
+
{
|
|
16867
|
+
value: entries.map(([k, v]) => `${propertyLabels[k] || k}: ${String(v)}`).join("\n")
|
|
16868
|
+
}
|
|
16869
|
+
)
|
|
16870
|
+
] }),
|
|
16871
|
+
entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/20", children: entries.map(([key, value]) => {
|
|
16872
|
+
const label = propertyLabels[key] || key;
|
|
16873
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5", children: [
|
|
16874
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-muted-foreground shrink-0 w-[40%] sm:w-[38%]", children: [
|
|
16875
|
+
label,
|
|
16876
|
+
":"
|
|
16877
|
+
] }),
|
|
16878
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground break-all flex-1", children: String(value) })
|
|
16879
|
+
] }, key);
|
|
16880
|
+
}) })
|
|
16881
|
+
] });
|
|
16882
|
+
};
|
|
16883
|
+
var TooltipBodyComponent = ({ data, isLoading, connections, isInput, externalSystem }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-3 space-y-3 overflow-y-auto flex-1 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: [
|
|
16884
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
|
|
16885
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-6 w-3/4" }),
|
|
16886
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3.5 w-1/2" })
|
|
16887
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(NameTooltip, { name: data.name, description: data.description }),
|
|
16888
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/20" }),
|
|
16889
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
|
|
16890
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
|
|
16891
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" }),
|
|
16892
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" })
|
|
16893
|
+
] }),
|
|
16894
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/20" }),
|
|
16895
|
+
[1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
16896
|
+
"div",
|
|
16897
|
+
{
|
|
16898
|
+
className: "rounded-lg border border-border/20 overflow-hidden",
|
|
16899
|
+
children: [
|
|
16900
|
+
/* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-8 w-full" }),
|
|
16901
|
+
[1, 2, 3].map((j) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-7 w-full mt-px" }, j))
|
|
16902
|
+
]
|
|
16903
|
+
},
|
|
16904
|
+
i
|
|
16905
|
+
))
|
|
16906
|
+
] }) : connections.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-4", children: "Nenhuma conex\xE3o encontrada" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
16907
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
16908
|
+
SystemsDiagram,
|
|
16909
|
+
{
|
|
16910
|
+
isInput,
|
|
16911
|
+
currentSystem: data.name,
|
|
16912
|
+
externalSystem
|
|
16913
|
+
}
|
|
16914
|
+
),
|
|
16915
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/20" }),
|
|
16916
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: isInput ? "Informa\xE7\xF5es de Entrada" : "Informa\xE7\xF5es de Sa\xEDda" }) }),
|
|
16917
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: connections.map((conn) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
16918
|
+
IntegrationCard,
|
|
16919
|
+
{
|
|
16920
|
+
title: conn.name,
|
|
16921
|
+
details: conn.integration
|
|
16922
|
+
},
|
|
16923
|
+
conn.id
|
|
16924
|
+
)) })
|
|
16925
|
+
] })
|
|
16926
|
+
] });
|
|
16927
|
+
var TooltipBody = React32__namespace.default.memo(TooltipBodyComponent);
|
|
16928
|
+
var tooltipVariants3 = {
|
|
16929
|
+
hidden: {
|
|
16930
|
+
opacity: 0,
|
|
16931
|
+
scale: 0.96,
|
|
16932
|
+
transition: { type: "spring", stiffness: 400, damping: 28 }
|
|
16933
|
+
},
|
|
16934
|
+
visible: {
|
|
16935
|
+
opacity: 1,
|
|
16936
|
+
scale: 1,
|
|
16937
|
+
transition: { type: "spring", stiffness: 300, damping: 28 }
|
|
16938
|
+
},
|
|
16939
|
+
exit: {
|
|
16940
|
+
opacity: 0,
|
|
16941
|
+
scale: 0.96,
|
|
16942
|
+
transition: { type: "spring", stiffness: 400, damping: 28 }
|
|
16943
|
+
}
|
|
16944
|
+
};
|
|
16945
|
+
var IntegrationTooltip = ({
|
|
16946
|
+
id,
|
|
16947
|
+
data,
|
|
16948
|
+
position,
|
|
16949
|
+
title = "Conex\xF5es",
|
|
16950
|
+
isLoading = false,
|
|
16951
|
+
systemName,
|
|
16952
|
+
onMouseDown,
|
|
16953
|
+
onClose,
|
|
16954
|
+
onPositionChange
|
|
16955
|
+
}) => {
|
|
16956
|
+
const isMobile = useIsMobile();
|
|
16957
|
+
const [localPos, setLocalPos] = React32.useState(position);
|
|
16958
|
+
const [dragging, setDragging] = React32.useState(false);
|
|
16959
|
+
const offsetRef = React32.useRef({ x: 0, y: 0 });
|
|
16960
|
+
const lastMouse = React32.useRef({ x: 0, y: 0 });
|
|
16961
|
+
React32.useEffect(() => setLocalPos(position), [position]);
|
|
16962
|
+
React32.useEffect(() => {
|
|
16963
|
+
let rafId = null;
|
|
16964
|
+
const handleMouseMove = (e) => {
|
|
16965
|
+
if (!dragging) return;
|
|
16966
|
+
lastMouse.current = { x: e.clientX, y: e.clientY };
|
|
16967
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
16968
|
+
rafId = requestAnimationFrame(() => {
|
|
16969
|
+
const newLeft = lastMouse.current.x - offsetRef.current.x;
|
|
16970
|
+
const newTop = lastMouse.current.y - offsetRef.current.y;
|
|
16971
|
+
const p = {
|
|
16972
|
+
top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
|
|
16973
|
+
left: Math.max(0, Math.min(newLeft, window.innerWidth - 320))
|
|
16974
|
+
};
|
|
16975
|
+
setLocalPos(p);
|
|
16976
|
+
onPositionChange?.(id, p);
|
|
16977
|
+
});
|
|
16978
|
+
};
|
|
16979
|
+
const handleMouseUp = () => {
|
|
16980
|
+
if (dragging) {
|
|
16981
|
+
setDragging(false);
|
|
16982
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
16983
|
+
}
|
|
16984
|
+
};
|
|
16985
|
+
if (dragging) {
|
|
16986
|
+
document.addEventListener("mousemove", handleMouseMove, {
|
|
16987
|
+
passive: true
|
|
16988
|
+
});
|
|
16989
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
16990
|
+
document.body.style.cursor = "grabbing";
|
|
16991
|
+
document.body.style.userSelect = "none";
|
|
16992
|
+
}
|
|
16993
|
+
return () => {
|
|
16994
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
16995
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
16996
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
16997
|
+
document.body.style.cursor = "";
|
|
16998
|
+
document.body.style.userSelect = "";
|
|
16999
|
+
};
|
|
17000
|
+
}, [dragging, id, onPositionChange]);
|
|
17001
|
+
const handleMouseDownLocal = React32.useCallback(
|
|
17002
|
+
(e) => {
|
|
17003
|
+
e.preventDefault();
|
|
17004
|
+
e.stopPropagation();
|
|
17005
|
+
const rect = e.currentTarget.closest(".fixed")?.getBoundingClientRect();
|
|
17006
|
+
if (!rect) return;
|
|
17007
|
+
offsetRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
|
|
17008
|
+
setDragging(true);
|
|
17009
|
+
onMouseDown?.(id, e);
|
|
17010
|
+
},
|
|
17011
|
+
[id, onMouseDown]
|
|
17012
|
+
);
|
|
17013
|
+
const handleTouchStartLocal = React32.useCallback(
|
|
17014
|
+
(e) => {
|
|
17015
|
+
e.stopPropagation();
|
|
17016
|
+
const touch = e.touches[0];
|
|
17017
|
+
if (!touch) return;
|
|
17018
|
+
const rect = e.currentTarget.closest(".fixed")?.getBoundingClientRect();
|
|
17019
|
+
if (!rect) return;
|
|
17020
|
+
offsetRef.current = {
|
|
17021
|
+
x: touch.clientX - rect.left,
|
|
17022
|
+
y: touch.clientY - rect.top
|
|
17023
|
+
};
|
|
17024
|
+
setDragging(true);
|
|
17025
|
+
onMouseDown?.(id, e);
|
|
17026
|
+
},
|
|
17027
|
+
[id, onMouseDown]
|
|
17028
|
+
);
|
|
17029
|
+
const inputConnections = React32.useMemo(
|
|
17030
|
+
() => data.connections.filter((c) => c.type === "entrada"),
|
|
17031
|
+
[data.connections]
|
|
17032
|
+
);
|
|
17033
|
+
const outputConnections = React32.useMemo(
|
|
17034
|
+
() => data.connections.filter((c) => c.type === "saida"),
|
|
17035
|
+
[data.connections]
|
|
17036
|
+
);
|
|
17037
|
+
const isInput = inputConnections.length > 0;
|
|
17038
|
+
const connections = isInput ? inputConnections : outputConnections;
|
|
17039
|
+
const externalSystem = systemName ?? connections[0]?.name ?? "Sistema";
|
|
17040
|
+
const header = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17041
|
+
"div",
|
|
17042
|
+
{
|
|
17043
|
+
className: "flex items-center justify-between py-1 border-b border-border/10 bg-muted/30 shrink-0",
|
|
17044
|
+
onMouseDown: handleMouseDownLocal,
|
|
17045
|
+
onTouchStart: handleTouchStartLocal,
|
|
17046
|
+
style: {
|
|
17047
|
+
touchAction: "none",
|
|
17048
|
+
cursor: dragging ? "grabbing" : "grab"
|
|
17049
|
+
},
|
|
17050
|
+
children: [
|
|
17051
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3", children: [
|
|
17052
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.DotsSixVerticalIcon, { size: 16, className: "text-primary" }),
|
|
17053
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: title })
|
|
17054
|
+
] }),
|
|
17055
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17056
|
+
ButtonBase,
|
|
17057
|
+
{
|
|
17058
|
+
variant: "ghost",
|
|
17059
|
+
size: "icon",
|
|
17060
|
+
onClick: () => onClose(id),
|
|
17061
|
+
className: "text-muted-foreground hover:text-destructive transition-colors hover:bg-destructive/10 mr-1",
|
|
17062
|
+
style: { cursor: "pointer" },
|
|
17063
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { size: 16 })
|
|
17064
|
+
}
|
|
17065
|
+
)
|
|
17066
|
+
]
|
|
17067
|
+
}
|
|
17068
|
+
);
|
|
17069
|
+
const bodyProps = { data, isLoading, connections, isInput, externalSystem };
|
|
17070
|
+
if (isMobile) {
|
|
17071
|
+
return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17072
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17073
|
+
framerMotion.motion.div,
|
|
17074
|
+
{
|
|
17075
|
+
className: "fixed inset-0 z-[9999] bg-black/40 backdrop-blur-[2px]",
|
|
17076
|
+
initial: { opacity: 0 },
|
|
17077
|
+
animate: { opacity: 1 },
|
|
17078
|
+
exit: { opacity: 0 },
|
|
17079
|
+
onClick: () => onClose(id)
|
|
17080
|
+
},
|
|
17081
|
+
`overlay-${id}`
|
|
17082
|
+
),
|
|
17083
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17084
|
+
framerMotion.motion.div,
|
|
17085
|
+
{
|
|
17086
|
+
className: "fixed bottom-0 left-0 right-0 z-[10000] bg-card border-t border-border/50 rounded-t-2xl shadow-2xl flex flex-col",
|
|
17087
|
+
style: { maxHeight: "85dvh" },
|
|
17088
|
+
initial: { y: "100%" },
|
|
17089
|
+
animate: { y: 0 },
|
|
17090
|
+
exit: { y: "100%" },
|
|
17091
|
+
transition: { type: "spring", stiffness: 320, damping: 36 },
|
|
17092
|
+
onClick: (e) => e.stopPropagation(),
|
|
17093
|
+
children: [
|
|
17094
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2.5 pb-1 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-1 rounded-full bg-border" }) }),
|
|
17095
|
+
header,
|
|
17096
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 pb-[env(safe-area-inset-bottom)]", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipBody, { ...bodyProps }) })
|
|
17097
|
+
]
|
|
17098
|
+
},
|
|
17099
|
+
`sheet-${id}`
|
|
17100
|
+
)
|
|
17101
|
+
] }) });
|
|
17102
|
+
}
|
|
17103
|
+
return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17104
|
+
framerMotion.motion.div,
|
|
17105
|
+
{
|
|
17106
|
+
className: "fixed bg-card/95 backdrop-blur-md border border-border/50 rounded-lg shadow-2xl z-[10000] w-[calc(100vw-32px)] max-w-sm sm:w-80 overflow-hidden flex flex-col",
|
|
17107
|
+
variants: tooltipVariants3,
|
|
17108
|
+
initial: "hidden",
|
|
17109
|
+
animate: "visible",
|
|
17110
|
+
exit: "exit",
|
|
17111
|
+
style: { top: localPos.top, left: localPos.left },
|
|
17112
|
+
onClick: (e) => e.stopPropagation(),
|
|
17113
|
+
children: [
|
|
17114
|
+
header,
|
|
17115
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[520px] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipBody, { ...bodyProps }) })
|
|
17116
|
+
]
|
|
17117
|
+
},
|
|
17118
|
+
id
|
|
17119
|
+
) });
|
|
17120
|
+
};
|
|
17121
|
+
var IntegrationTooltip_default = IntegrationTooltip;
|
|
17122
|
+
|
|
17123
|
+
// src/components/ui/charts/components/tooltips/utils/integrationTooltipUtils.ts
|
|
17124
|
+
function processIntegrationData(integrations, targetSystemName) {
|
|
17125
|
+
const connections = [];
|
|
17126
|
+
integrations.forEach((integration) => {
|
|
17127
|
+
const origemNome = integration.origem.properties.nome;
|
|
17128
|
+
const destinoNome = integration.destino.properties.nome;
|
|
17129
|
+
if (origemNome === targetSystemName) {
|
|
17130
|
+
connections.push({
|
|
17131
|
+
id: integration.r.elementId,
|
|
17132
|
+
name: destinoNome,
|
|
17133
|
+
type: "saida",
|
|
17134
|
+
integration: integration.r.properties
|
|
17135
|
+
});
|
|
17136
|
+
}
|
|
17137
|
+
if (destinoNome === targetSystemName) {
|
|
17138
|
+
connections.push({
|
|
17139
|
+
id: integration.r.elementId,
|
|
17140
|
+
name: origemNome,
|
|
17141
|
+
type: "entrada",
|
|
17142
|
+
integration: integration.r.properties
|
|
17143
|
+
});
|
|
17144
|
+
}
|
|
17145
|
+
});
|
|
17146
|
+
return {
|
|
17147
|
+
name: targetSystemName,
|
|
17148
|
+
connections
|
|
17149
|
+
};
|
|
17150
|
+
}
|
|
16484
17151
|
|
|
16485
|
-
// src/components/ui/charts/components/tooltips/systemTooltipUtils.ts
|
|
17152
|
+
// src/components/ui/charts/components/tooltips/utils/systemTooltipUtils.ts
|
|
16486
17153
|
function processNeo4jData(integrations, targetSystemName) {
|
|
16487
17154
|
const connections = [];
|
|
16488
17155
|
integrations.forEach((integration) => {
|
|
@@ -20385,6 +21052,7 @@ exports.AvatarFallbackBase = AvatarFallbackBase;
|
|
|
20385
21052
|
exports.AvatarImageBase = AvatarImageBase;
|
|
20386
21053
|
exports.BackButton = BackButton;
|
|
20387
21054
|
exports.Badge = Badge;
|
|
21055
|
+
exports.Beam = Beam;
|
|
20388
21056
|
exports.BreadcrumbBase = BreadcrumbBase;
|
|
20389
21057
|
exports.BreadcrumbEllipsisBase = BreadcrumbEllipsisBase;
|
|
20390
21058
|
exports.BreadcrumbItemBase = BreadcrumbItemBase;
|
|
@@ -20448,6 +21116,7 @@ exports.ContextMenuSubTriggerBase = ContextMenuSubTriggerBase;
|
|
|
20448
21116
|
exports.ContextMenuTriggerBase = ContextMenuTriggerBase;
|
|
20449
21117
|
exports.ControlledCombobox = ControlledCombobox;
|
|
20450
21118
|
exports.CopyButton = CopyButton;
|
|
21119
|
+
exports.CopyData = CopyData;
|
|
20451
21120
|
exports.DateTimePicker = DateTimePicker;
|
|
20452
21121
|
exports.DayView = DayView;
|
|
20453
21122
|
exports.DayViewAgenda = DayViewAgenda;
|
|
@@ -20528,6 +21197,8 @@ exports.InputOTPBase = InputOTPBase;
|
|
|
20528
21197
|
exports.InputOTPGroupBase = InputOTPGroupBase;
|
|
20529
21198
|
exports.InputOTPSeparatorBase = InputOTPSeparatorBase;
|
|
20530
21199
|
exports.InputOTPSlotBase = InputOTPSlotBase;
|
|
21200
|
+
exports.IntegrationCard = IntegrationCard;
|
|
21201
|
+
exports.IntegrationTooltip = IntegrationTooltip_default;
|
|
20531
21202
|
exports.LabelBase = LabelBase_default;
|
|
20532
21203
|
exports.Leaderboard = Leaderboard;
|
|
20533
21204
|
exports.LikeButton = LikeButton;
|
|
@@ -20557,6 +21228,7 @@ exports.MultiSelectItemBase = MultiSelectItemBase;
|
|
|
20557
21228
|
exports.MultiSelectSeparatorBase = MultiSelectSeparatorBase;
|
|
20558
21229
|
exports.MultiSelectTriggerBase = MultiSelectTriggerBase;
|
|
20559
21230
|
exports.MultiSelectValueBase = MultiSelectValueBase;
|
|
21231
|
+
exports.NameTooltip = NameTooltip;
|
|
20560
21232
|
exports.NavigationMenuBase = NavigationMenuBase;
|
|
20561
21233
|
exports.NavigationMenuContentBase = NavigationMenuContentBase;
|
|
20562
21234
|
exports.NavigationMenuIndicatorBase = NavigationMenuIndicatorBase;
|
|
@@ -20638,7 +21310,9 @@ exports.StartHour = StartHour;
|
|
|
20638
21310
|
exports.StartHourAgenda = StartHourAgenda;
|
|
20639
21311
|
exports.StatusIndicator = StatusIndicator;
|
|
20640
21312
|
exports.SwitchBase = SwitchBase;
|
|
21313
|
+
exports.SystemNode = SystemNode;
|
|
20641
21314
|
exports.SystemTooltip = SystemTooltip_default;
|
|
21315
|
+
exports.SystemsDiagram = SystemsDiagram;
|
|
20642
21316
|
exports.TableBase = TableBase;
|
|
20643
21317
|
exports.TableBodyBase = TableBodyBase;
|
|
20644
21318
|
exports.TableCaptionBase = TableCaptionBase;
|
|
@@ -20658,6 +21332,7 @@ exports.TimePickerInput = TimePickerInput;
|
|
|
20658
21332
|
exports.TimeSeries = TimeSeries_default;
|
|
20659
21333
|
exports.Toaster = Toaster;
|
|
20660
21334
|
exports.TooltipBase = TooltipBase;
|
|
21335
|
+
exports.TooltipBody = TooltipBody;
|
|
20661
21336
|
exports.TooltipContentBase = TooltipContentBase;
|
|
20662
21337
|
exports.TooltipProviderBase = TooltipProviderBase;
|
|
20663
21338
|
exports.TooltipSimple = TooltipSimple_default;
|
|
@@ -20675,6 +21350,7 @@ exports.WeekCellsHeight = WeekCellsHeight;
|
|
|
20675
21350
|
exports.WeekCellsHeightAgenda = WeekCellsHeightAgenda;
|
|
20676
21351
|
exports.WeekView = WeekView;
|
|
20677
21352
|
exports.WeekViewAgenda = WeekViewAgenda;
|
|
21353
|
+
exports.YearViewAgenda = YearViewAgenda;
|
|
20678
21354
|
exports.adaptDataForTooltip = adaptDataForTooltip;
|
|
20679
21355
|
exports.addHoursToDate = addHoursToDate;
|
|
20680
21356
|
exports.addHoursToDateAgenda = addHoursToDateAgenda;
|
|
@@ -20732,6 +21408,7 @@ exports.isValidHour = isValidHour;
|
|
|
20732
21408
|
exports.isValidMinuteOrSecond = isValidMinuteOrSecond;
|
|
20733
21409
|
exports.niceCeil = niceCeil;
|
|
20734
21410
|
exports.normalizeAttendDate = normalizeAttendDate;
|
|
21411
|
+
exports.processIntegrationData = processIntegrationData;
|
|
20735
21412
|
exports.processNeo4jData = processNeo4jData;
|
|
20736
21413
|
exports.renderInsideBarLabel = renderInsideBarLabel;
|
|
20737
21414
|
exports.renderPillLabel = pillLabelRenderer_default;
|
|
@@ -20760,6 +21437,7 @@ exports.useDrag = useDrag;
|
|
|
20760
21437
|
exports.useEventVisibility = useEventVisibility;
|
|
20761
21438
|
exports.useEventVisibilityAgenda = useEventVisibilityAgenda;
|
|
20762
21439
|
exports.useIsMobile = useIsMobile;
|
|
21440
|
+
exports.useIsTruncated = useIsTruncated;
|
|
20763
21441
|
exports.useOpenTooltipForPeriod = useOpenTooltipForPeriod;
|
|
20764
21442
|
exports.useProcessedData = useProcessedData;
|
|
20765
21443
|
exports.useSeriesOpacity = useSeriesOpacity;
|