@mlw-packages/react-components 1.10.29 → 1.10.30
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 +12 -4
- package/dist/index.d.mts +6 -3
- package/dist/index.d.ts +6 -3
- package/dist/index.js +173 -23
- package/dist/index.mjs +173 -23
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -7784,10 +7784,18 @@ body {
|
|
|
7784
7784
|
padding-left: 0.75rem;
|
|
7785
7785
|
padding-right: 0.75rem;
|
|
7786
7786
|
}
|
|
7787
|
+
.sm\:px-4 {
|
|
7788
|
+
padding-left: 1rem;
|
|
7789
|
+
padding-right: 1rem;
|
|
7790
|
+
}
|
|
7787
7791
|
.sm\:px-6 {
|
|
7788
7792
|
padding-left: 1.5rem;
|
|
7789
7793
|
padding-right: 1.5rem;
|
|
7790
7794
|
}
|
|
7795
|
+
.sm\:py-4 {
|
|
7796
|
+
padding-top: 1rem;
|
|
7797
|
+
padding-bottom: 1rem;
|
|
7798
|
+
}
|
|
7791
7799
|
.sm\:pe-4 {
|
|
7792
7800
|
padding-inline-end: 1rem;
|
|
7793
7801
|
}
|
|
@@ -8029,6 +8037,10 @@ body {
|
|
|
8029
8037
|
padding-left: 2rem;
|
|
8030
8038
|
padding-right: 2rem;
|
|
8031
8039
|
}
|
|
8040
|
+
.lg\:text-2xl {
|
|
8041
|
+
font-size: 1.5rem;
|
|
8042
|
+
line-height: 2rem;
|
|
8043
|
+
}
|
|
8032
8044
|
.lg\:text-xl {
|
|
8033
8045
|
font-size: 1.25rem;
|
|
8034
8046
|
line-height: 1.75rem;
|
|
@@ -8047,10 +8059,6 @@ body {
|
|
|
8047
8059
|
.xl\:grid-cols-4 {
|
|
8048
8060
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
8049
8061
|
}
|
|
8050
|
-
.xl\:text-2xl {
|
|
8051
|
-
font-size: 1.5rem;
|
|
8052
|
-
line-height: 2rem;
|
|
8053
|
-
}
|
|
8054
8062
|
}
|
|
8055
8063
|
.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
|
|
8056
8064
|
border-radius: 9999px;
|
package/dist/index.d.mts
CHANGED
|
@@ -1005,9 +1005,10 @@ interface DayViewProps$1 {
|
|
|
1005
1005
|
showUndatedEvents?: boolean;
|
|
1006
1006
|
/** When true, hides event times */
|
|
1007
1007
|
noTime?: boolean;
|
|
1008
|
+
allDayCell?: boolean;
|
|
1008
1009
|
onEventCreate?: (startTime: Date) => void;
|
|
1009
1010
|
}
|
|
1010
|
-
declare function DayViewAgenda({ currentDate, events, onEventSelect, showUndatedEvents, noTime, onEventCreate, }: DayViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1011
|
+
declare function DayViewAgenda({ currentDate, events, onEventSelect, showUndatedEvents, noTime, onEventCreate, allDayCell, }: DayViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1011
1012
|
|
|
1012
1013
|
interface DroppableCellProps$1 {
|
|
1013
1014
|
id: string;
|
|
@@ -1035,13 +1036,14 @@ interface EventCalendarProps$1 {
|
|
|
1035
1036
|
onlyAgenda?: boolean;
|
|
1036
1037
|
onlyYear?: boolean;
|
|
1037
1038
|
allowCellClick?: boolean;
|
|
1039
|
+
allDayCell?: boolean;
|
|
1038
1040
|
}
|
|
1039
1041
|
interface ModalLikeProps {
|
|
1040
1042
|
event?: CalendarEventAgenda;
|
|
1041
1043
|
onClose?: () => void;
|
|
1042
1044
|
[key: string]: unknown;
|
|
1043
1045
|
}
|
|
1044
|
-
declare function EventAgenda({ events, optionsViewEvents, onEventUpdate, className, initialView, initialDate, onClick, showYearView, noTime, onlyDay, onlyMonth, onlyWeek, onlyAgenda, onlyYear, allowCellClick, }: EventCalendarProps$1): react_jsx_runtime.JSX.Element;
|
|
1046
|
+
declare function EventAgenda({ events, optionsViewEvents, onEventUpdate, className, initialView, initialDate, onClick, showYearView, noTime, onlyDay, onlyMonth, onlyWeek, onlyAgenda, onlyYear, allowCellClick, allDayCell, }: EventCalendarProps$1): react_jsx_runtime.JSX.Element;
|
|
1045
1047
|
|
|
1046
1048
|
interface EventItemProps$1 {
|
|
1047
1049
|
event: CalendarEventAgenda;
|
|
@@ -1154,10 +1156,11 @@ interface WeekViewProps$1 {
|
|
|
1154
1156
|
onEventSelect: (event: CalendarEventAgenda, e?: React__default.MouseEvent) => void;
|
|
1155
1157
|
onEventCreate?: (startTime: Date) => void;
|
|
1156
1158
|
showUndatedEvents?: boolean;
|
|
1159
|
+
allDayCell?: boolean;
|
|
1157
1160
|
/** When true, hides event times */
|
|
1158
1161
|
noTime?: boolean;
|
|
1159
1162
|
}
|
|
1160
|
-
declare function WeekViewAgenda({ currentDate, events, onEventSelect, onEventCreate, showUndatedEvents, noTime, }: WeekViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1163
|
+
declare function WeekViewAgenda({ currentDate, events, onEventSelect, allDayCell, onEventCreate, showUndatedEvents, noTime, }: WeekViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1161
1164
|
|
|
1162
1165
|
interface YearViewProps {
|
|
1163
1166
|
currentDate: Date;
|
package/dist/index.d.ts
CHANGED
|
@@ -1005,9 +1005,10 @@ interface DayViewProps$1 {
|
|
|
1005
1005
|
showUndatedEvents?: boolean;
|
|
1006
1006
|
/** When true, hides event times */
|
|
1007
1007
|
noTime?: boolean;
|
|
1008
|
+
allDayCell?: boolean;
|
|
1008
1009
|
onEventCreate?: (startTime: Date) => void;
|
|
1009
1010
|
}
|
|
1010
|
-
declare function DayViewAgenda({ currentDate, events, onEventSelect, showUndatedEvents, noTime, onEventCreate, }: DayViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1011
|
+
declare function DayViewAgenda({ currentDate, events, onEventSelect, showUndatedEvents, noTime, onEventCreate, allDayCell, }: DayViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1011
1012
|
|
|
1012
1013
|
interface DroppableCellProps$1 {
|
|
1013
1014
|
id: string;
|
|
@@ -1035,13 +1036,14 @@ interface EventCalendarProps$1 {
|
|
|
1035
1036
|
onlyAgenda?: boolean;
|
|
1036
1037
|
onlyYear?: boolean;
|
|
1037
1038
|
allowCellClick?: boolean;
|
|
1039
|
+
allDayCell?: boolean;
|
|
1038
1040
|
}
|
|
1039
1041
|
interface ModalLikeProps {
|
|
1040
1042
|
event?: CalendarEventAgenda;
|
|
1041
1043
|
onClose?: () => void;
|
|
1042
1044
|
[key: string]: unknown;
|
|
1043
1045
|
}
|
|
1044
|
-
declare function EventAgenda({ events, optionsViewEvents, onEventUpdate, className, initialView, initialDate, onClick, showYearView, noTime, onlyDay, onlyMonth, onlyWeek, onlyAgenda, onlyYear, allowCellClick, }: EventCalendarProps$1): react_jsx_runtime.JSX.Element;
|
|
1046
|
+
declare function EventAgenda({ events, optionsViewEvents, onEventUpdate, className, initialView, initialDate, onClick, showYearView, noTime, onlyDay, onlyMonth, onlyWeek, onlyAgenda, onlyYear, allowCellClick, allDayCell, }: EventCalendarProps$1): react_jsx_runtime.JSX.Element;
|
|
1045
1047
|
|
|
1046
1048
|
interface EventItemProps$1 {
|
|
1047
1049
|
event: CalendarEventAgenda;
|
|
@@ -1154,10 +1156,11 @@ interface WeekViewProps$1 {
|
|
|
1154
1156
|
onEventSelect: (event: CalendarEventAgenda, e?: React__default.MouseEvent) => void;
|
|
1155
1157
|
onEventCreate?: (startTime: Date) => void;
|
|
1156
1158
|
showUndatedEvents?: boolean;
|
|
1159
|
+
allDayCell?: boolean;
|
|
1157
1160
|
/** When true, hides event times */
|
|
1158
1161
|
noTime?: boolean;
|
|
1159
1162
|
}
|
|
1160
|
-
declare function WeekViewAgenda({ currentDate, events, onEventSelect, onEventCreate, showUndatedEvents, noTime, }: WeekViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1163
|
+
declare function WeekViewAgenda({ currentDate, events, onEventSelect, allDayCell, onEventCreate, showUndatedEvents, noTime, }: WeekViewProps$1): react_jsx_runtime.JSX.Element;
|
|
1161
1164
|
|
|
1162
1165
|
interface YearViewProps {
|
|
1163
1166
|
currentDate: Date;
|
package/dist/index.js
CHANGED
|
@@ -9801,7 +9801,8 @@ function DayViewAgenda({
|
|
|
9801
9801
|
onEventSelect,
|
|
9802
9802
|
showUndatedEvents,
|
|
9803
9803
|
noTime = false,
|
|
9804
|
-
onEventCreate
|
|
9804
|
+
onEventCreate,
|
|
9805
|
+
allDayCell = false
|
|
9805
9806
|
}) {
|
|
9806
9807
|
const hours = React32.useMemo(() => {
|
|
9807
9808
|
const dayStart = dateFns.startOfDay(currentDate);
|
|
@@ -9915,7 +9916,7 @@ function DayViewAgenda({
|
|
|
9915
9916
|
const showAllDaySection = allDayEvents.length > 0;
|
|
9916
9917
|
const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicatorAgenda(currentDate, "day");
|
|
9917
9918
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "contents", "data-slot": "day-view", children: [
|
|
9918
|
-
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: [
|
|
9919
|
+
showAllDaySection && !allDayCell && /* @__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: [
|
|
9919
9920
|
/* @__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" }) }),
|
|
9920
9921
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r p-1 last:border-r-0", children: allDayEvents.map((event) => {
|
|
9921
9922
|
const eventStart = getEventStartDate(event);
|
|
@@ -9962,7 +9963,100 @@ function DayViewAgenda({
|
|
|
9962
9963
|
},
|
|
9963
9964
|
hour.toString()
|
|
9964
9965
|
)) }),
|
|
9965
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
9966
|
+
showAllDaySection && allDayCell ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
9967
|
+
allDayEvents.map((event) => {
|
|
9968
|
+
const eventStart = new Date(event.start);
|
|
9969
|
+
const eventEnd = new Date(new Date(event.end).setHours(23, 59));
|
|
9970
|
+
const isFirstDay = dateFns.isSameDay(currentDate, eventStart);
|
|
9971
|
+
const isLastDay = dateFns.isSameDay(currentDate, eventEnd);
|
|
9972
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9973
|
+
"div",
|
|
9974
|
+
{
|
|
9975
|
+
className: "absolute z-10 px-0.5",
|
|
9976
|
+
style: { height: "100%", width: "100%", padding: "10px" },
|
|
9977
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { delayDuration: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
9978
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
9979
|
+
EventItemAgenda,
|
|
9980
|
+
{
|
|
9981
|
+
event,
|
|
9982
|
+
view: "day",
|
|
9983
|
+
isFirstDay,
|
|
9984
|
+
isLastDay,
|
|
9985
|
+
onClick: (e) => handleEventClick(event, e),
|
|
9986
|
+
noTime,
|
|
9987
|
+
className: "flex justify-start items-start rounded-sm p-2"
|
|
9988
|
+
}
|
|
9989
|
+
) }) }),
|
|
9990
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
9991
|
+
TooltipContentBase,
|
|
9992
|
+
{
|
|
9993
|
+
side: "top",
|
|
9994
|
+
sideOffset: 6,
|
|
9995
|
+
className: "max-w-[220px] space-y-0.5",
|
|
9996
|
+
children: [
|
|
9997
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-sm leading-snug", children: event.title }),
|
|
9998
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: formatDurationAgenda(event) }),
|
|
9999
|
+
event.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs flex items-center gap-2", children: [
|
|
10000
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.MapPinIcon, { size: 15 }),
|
|
10001
|
+
" ",
|
|
10002
|
+
event.location
|
|
10003
|
+
] }),
|
|
10004
|
+
event.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-75 line-clamp-2", children: event.description })
|
|
10005
|
+
]
|
|
10006
|
+
}
|
|
10007
|
+
)
|
|
10008
|
+
] }) })
|
|
10009
|
+
},
|
|
10010
|
+
`spanning-${event.id}`
|
|
10011
|
+
);
|
|
10012
|
+
}),
|
|
10013
|
+
currentTimeVisible && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10014
|
+
"div",
|
|
10015
|
+
{
|
|
10016
|
+
className: "pointer-events-none absolute right-0 left-0 z-20",
|
|
10017
|
+
style: { top: `${currentTimePosition}%` },
|
|
10018
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
|
|
10019
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "-left-1 absolute h-2 w-2 rounded-full bg-primary" }),
|
|
10020
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[2px] w-full bg-primary" })
|
|
10021
|
+
] })
|
|
10022
|
+
}
|
|
10023
|
+
),
|
|
10024
|
+
hours.map((hour) => {
|
|
10025
|
+
const hourValue = dateFns.getHours(hour);
|
|
10026
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10027
|
+
"div",
|
|
10028
|
+
{
|
|
10029
|
+
className: "relative h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0",
|
|
10030
|
+
children: [0, 1, 2, 3].map((quarter) => {
|
|
10031
|
+
const quarterHourTime = hourValue + quarter * 0.25;
|
|
10032
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10033
|
+
DroppableCellAgenda,
|
|
10034
|
+
{
|
|
10035
|
+
className: cn(
|
|
10036
|
+
"absolute h-[calc(var(--week-cells-height)/4)] w-full",
|
|
10037
|
+
quarter === 0 && "top-0",
|
|
10038
|
+
quarter === 1 && "top-[calc(var(--week-cells-height)/4)]",
|
|
10039
|
+
quarter === 2 && "top-[calc(var(--week-cells-height)/4*2)]",
|
|
10040
|
+
quarter === 3 && "top-[calc(var(--week-cells-height)/4*3)]"
|
|
10041
|
+
),
|
|
10042
|
+
date: currentDate,
|
|
10043
|
+
id: `day-cell-${currentDate.toISOString()}-${quarterHourTime}`,
|
|
10044
|
+
onClick: () => {
|
|
10045
|
+
const startTime = new Date(currentDate);
|
|
10046
|
+
startTime.setHours(hourValue);
|
|
10047
|
+
startTime.setMinutes(quarter * 15);
|
|
10048
|
+
if (onEventCreate) onEventCreate(startTime);
|
|
10049
|
+
},
|
|
10050
|
+
time: quarterHourTime
|
|
10051
|
+
},
|
|
10052
|
+
`${hour.toString()}-${quarter}`
|
|
10053
|
+
);
|
|
10054
|
+
})
|
|
10055
|
+
},
|
|
10056
|
+
hour.toString()
|
|
10057
|
+
);
|
|
10058
|
+
})
|
|
10059
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
9966
10060
|
positionedEvents.map((positionedEvent) => {
|
|
9967
10061
|
const evt = positionedEvent.event;
|
|
9968
10062
|
const eventStart = new Date(evt.start ?? evt.end ?? Date.now());
|
|
@@ -10316,7 +10410,8 @@ function EventAgenda({
|
|
|
10316
10410
|
onlyWeek,
|
|
10317
10411
|
onlyAgenda,
|
|
10318
10412
|
onlyYear,
|
|
10319
|
-
allowCellClick = true
|
|
10413
|
+
allowCellClick = true,
|
|
10414
|
+
allDayCell = false
|
|
10320
10415
|
}) {
|
|
10321
10416
|
const lockedView = onlyDay ? "day" : onlyMonth ? "month" : onlyWeek ? "week" : onlyAgenda ? "agenda" : onlyYear ? "year" : void 0;
|
|
10322
10417
|
const [currentDate, setCurrentDate] = React32.useState(
|
|
@@ -10436,9 +10531,10 @@ function EventAgenda({
|
|
|
10436
10531
|
},
|
|
10437
10532
|
children: [
|
|
10438
10533
|
/* @__PURE__ */ jsxRuntime.jsxs(CalendarDndProviderAgenda, { onEventUpdate: handleEventUpdate, children: [
|
|
10439
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between
|
|
10440
|
-
/* @__PURE__ */ jsxRuntime.
|
|
10441
|
-
|
|
10534
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 px-2 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4 sm:py-4", children: [
|
|
10535
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold text-base sm:text-lg md:text-xl lg:text-2xl truncate", children: viewTitle }),
|
|
10536
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between sm:justify-end gap-2", children: [
|
|
10537
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
10442
10538
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10443
10539
|
ButtonBase,
|
|
10444
10540
|
{
|
|
@@ -10460,21 +10556,18 @@ function EventAgenda({
|
|
|
10460
10556
|
}
|
|
10461
10557
|
)
|
|
10462
10558
|
] }),
|
|
10463
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10464
|
-
|
|
10465
|
-
|
|
10466
|
-
|
|
10467
|
-
|
|
10468
|
-
|
|
10469
|
-
|
|
10470
|
-
|
|
10471
|
-
|
|
10472
|
-
|
|
10473
|
-
|
|
10474
|
-
|
|
10475
|
-
hideClear: true
|
|
10476
|
-
}
|
|
10477
|
-
) })
|
|
10559
|
+
!lockedView && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10560
|
+
Select,
|
|
10561
|
+
{
|
|
10562
|
+
selected: activeView,
|
|
10563
|
+
onChange: (v) => setView(v),
|
|
10564
|
+
items: selectItems,
|
|
10565
|
+
placeholder: viewLabel(activeView),
|
|
10566
|
+
className: "min-w-24",
|
|
10567
|
+
hideClear: true
|
|
10568
|
+
}
|
|
10569
|
+
)
|
|
10570
|
+
] })
|
|
10478
10571
|
] }),
|
|
10479
10572
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col transition-all duration-200 ease-in-out", children: [
|
|
10480
10573
|
activeView === "month" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -10499,6 +10592,7 @@ function EventAgenda({
|
|
|
10499
10592
|
events,
|
|
10500
10593
|
onEventSelect: handleEventSelect,
|
|
10501
10594
|
noTime,
|
|
10595
|
+
allDayCell,
|
|
10502
10596
|
onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
|
|
10503
10597
|
start: d,
|
|
10504
10598
|
end: d,
|
|
@@ -10514,6 +10608,7 @@ function EventAgenda({
|
|
|
10514
10608
|
events,
|
|
10515
10609
|
onEventSelect: handleEventSelect,
|
|
10516
10610
|
noTime,
|
|
10611
|
+
allDayCell,
|
|
10517
10612
|
onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
|
|
10518
10613
|
start: d,
|
|
10519
10614
|
end: d,
|
|
@@ -11220,6 +11315,7 @@ function WeekViewAgenda({
|
|
|
11220
11315
|
currentDate,
|
|
11221
11316
|
events,
|
|
11222
11317
|
onEventSelect,
|
|
11318
|
+
allDayCell = false,
|
|
11223
11319
|
onEventCreate,
|
|
11224
11320
|
showUndatedEvents,
|
|
11225
11321
|
noTime = false
|
|
@@ -11395,7 +11491,7 @@ function WeekViewAgenda({
|
|
|
11395
11491
|
))
|
|
11396
11492
|
] }),
|
|
11397
11493
|
showAllDaySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/70 border-b bg-muted/50", children: [
|
|
11398
|
-
trueAllDayEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-8", children: [
|
|
11494
|
+
trueAllDayEvents.length > 0 && !allDayCell && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-8", children: [
|
|
11399
11495
|
/* @__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" }) }),
|
|
11400
11496
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11401
11497
|
"div",
|
|
@@ -11583,6 +11679,60 @@ function WeekViewAgenda({
|
|
|
11583
11679
|
className: "relative grid auto-cols-fr border-border/70 border-r last:border-r-0",
|
|
11584
11680
|
"data-today": dateFns.isToday(day) || void 0,
|
|
11585
11681
|
children: [
|
|
11682
|
+
trueAllDayEvents.length > 0 && allDayCell && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: trueAllDayEvents.filter(
|
|
11683
|
+
(event) => event.start?.toLocaleDateString() == new Date(day).toLocaleDateString()
|
|
11684
|
+
)?.map((event) => {
|
|
11685
|
+
const eventStart = new Date(event.start);
|
|
11686
|
+
const eventEnd = new Date(
|
|
11687
|
+
new Date(event.end).setHours(23, 59)
|
|
11688
|
+
);
|
|
11689
|
+
const isFirstDay = dateFns.isSameDay(currentDate, eventStart);
|
|
11690
|
+
const isLastDay = dateFns.isSameDay(currentDate, eventEnd);
|
|
11691
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11692
|
+
"div",
|
|
11693
|
+
{
|
|
11694
|
+
className: "absolute z-10 px-0.5",
|
|
11695
|
+
style: {
|
|
11696
|
+
height: "100%",
|
|
11697
|
+
width: "100%",
|
|
11698
|
+
padding: "10px"
|
|
11699
|
+
},
|
|
11700
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { delayDuration: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
11701
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11702
|
+
EventItemAgenda,
|
|
11703
|
+
{
|
|
11704
|
+
event,
|
|
11705
|
+
view: "day",
|
|
11706
|
+
isFirstDay,
|
|
11707
|
+
isLastDay,
|
|
11708
|
+
onClick: (e) => handleEventClick(event, e),
|
|
11709
|
+
noTime,
|
|
11710
|
+
className: "flex justify-start items-start rounded-sm py-1"
|
|
11711
|
+
}
|
|
11712
|
+
) }) }),
|
|
11713
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11714
|
+
TooltipContentBase,
|
|
11715
|
+
{
|
|
11716
|
+
side: "top",
|
|
11717
|
+
sideOffset: 6,
|
|
11718
|
+
className: "max-w-[220px] space-y-0.5",
|
|
11719
|
+
children: [
|
|
11720
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-sm leading-snug", children: event.title }),
|
|
11721
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: formatDurationAgenda(event) }),
|
|
11722
|
+
event.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs flex items-center gap-2", children: [
|
|
11723
|
+
/* @__PURE__ */ jsxRuntime.jsx(ssr.MapPinIcon, { size: 15 }),
|
|
11724
|
+
" ",
|
|
11725
|
+
event.location
|
|
11726
|
+
] }),
|
|
11727
|
+
event.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-75 line-clamp-2", children: event.description })
|
|
11728
|
+
]
|
|
11729
|
+
}
|
|
11730
|
+
)
|
|
11731
|
+
] }) })
|
|
11732
|
+
},
|
|
11733
|
+
`spanning-${event.id}`
|
|
11734
|
+
);
|
|
11735
|
+
}) }),
|
|
11586
11736
|
(processedDayEvents[dayIndex] ?? []).map((positionedEvent) => {
|
|
11587
11737
|
const timeLabel = formatDurationAgenda(positionedEvent.event);
|
|
11588
11738
|
return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { delayDuration: 250, children: [
|
package/dist/index.mjs
CHANGED
|
@@ -9759,7 +9759,8 @@ function DayViewAgenda({
|
|
|
9759
9759
|
onEventSelect,
|
|
9760
9760
|
showUndatedEvents,
|
|
9761
9761
|
noTime = false,
|
|
9762
|
-
onEventCreate
|
|
9762
|
+
onEventCreate,
|
|
9763
|
+
allDayCell = false
|
|
9763
9764
|
}) {
|
|
9764
9765
|
const hours = useMemo(() => {
|
|
9765
9766
|
const dayStart = startOfDay(currentDate);
|
|
@@ -9873,7 +9874,7 @@ function DayViewAgenda({
|
|
|
9873
9874
|
const showAllDaySection = allDayEvents.length > 0;
|
|
9874
9875
|
const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicatorAgenda(currentDate, "day");
|
|
9875
9876
|
return /* @__PURE__ */ jsxs("div", { className: "contents", "data-slot": "day-view", children: [
|
|
9876
|
-
showAllDaySection && /* @__PURE__ */ jsx("div", { className: "border-border/70 border-t bg-muted/50", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]", children: [
|
|
9877
|
+
showAllDaySection && !allDayCell && /* @__PURE__ */ jsx("div", { className: "border-border/70 border-t bg-muted/50", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]", children: [
|
|
9877
9878
|
/* @__PURE__ */ jsx("div", { className: "relative border-border/70 border-r flex items-center justify-center p-1", children: /* @__PURE__ */ jsx("span", { className: "text-center text-[10px] text-muted-foreground/70 sm:text-xs", children: "Todo Dia" }) }),
|
|
9878
9879
|
/* @__PURE__ */ jsx("div", { className: "relative border-border/70 border-r p-1 last:border-r-0", children: allDayEvents.map((event) => {
|
|
9879
9880
|
const eventStart = getEventStartDate(event);
|
|
@@ -9920,7 +9921,100 @@ function DayViewAgenda({
|
|
|
9920
9921
|
},
|
|
9921
9922
|
hour.toString()
|
|
9922
9923
|
)) }),
|
|
9923
|
-
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
9924
|
+
showAllDaySection && allDayCell ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
9925
|
+
allDayEvents.map((event) => {
|
|
9926
|
+
const eventStart = new Date(event.start);
|
|
9927
|
+
const eventEnd = new Date(new Date(event.end).setHours(23, 59));
|
|
9928
|
+
const isFirstDay = isSameDay(currentDate, eventStart);
|
|
9929
|
+
const isLastDay = isSameDay(currentDate, eventEnd);
|
|
9930
|
+
return /* @__PURE__ */ jsx(
|
|
9931
|
+
"div",
|
|
9932
|
+
{
|
|
9933
|
+
className: "absolute z-10 px-0.5",
|
|
9934
|
+
style: { height: "100%", width: "100%", padding: "10px" },
|
|
9935
|
+
children: /* @__PURE__ */ jsx(TooltipProviderBase, { delayDuration: 400, children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
|
|
9936
|
+
/* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "size-full", children: /* @__PURE__ */ jsx(
|
|
9937
|
+
EventItemAgenda,
|
|
9938
|
+
{
|
|
9939
|
+
event,
|
|
9940
|
+
view: "day",
|
|
9941
|
+
isFirstDay,
|
|
9942
|
+
isLastDay,
|
|
9943
|
+
onClick: (e) => handleEventClick(event, e),
|
|
9944
|
+
noTime,
|
|
9945
|
+
className: "flex justify-start items-start rounded-sm p-2"
|
|
9946
|
+
}
|
|
9947
|
+
) }) }),
|
|
9948
|
+
/* @__PURE__ */ jsxs(
|
|
9949
|
+
TooltipContentBase,
|
|
9950
|
+
{
|
|
9951
|
+
side: "top",
|
|
9952
|
+
sideOffset: 6,
|
|
9953
|
+
className: "max-w-[220px] space-y-0.5",
|
|
9954
|
+
children: [
|
|
9955
|
+
/* @__PURE__ */ jsx("p", { className: "font-semibold text-sm leading-snug", children: event.title }),
|
|
9956
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs opacity-90", children: formatDurationAgenda(event) }),
|
|
9957
|
+
event.location && /* @__PURE__ */ jsxs("p", { className: "text-xs flex items-center gap-2", children: [
|
|
9958
|
+
/* @__PURE__ */ jsx(MapPinIcon, { size: 15 }),
|
|
9959
|
+
" ",
|
|
9960
|
+
event.location
|
|
9961
|
+
] }),
|
|
9962
|
+
event.description && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-75 line-clamp-2", children: event.description })
|
|
9963
|
+
]
|
|
9964
|
+
}
|
|
9965
|
+
)
|
|
9966
|
+
] }) })
|
|
9967
|
+
},
|
|
9968
|
+
`spanning-${event.id}`
|
|
9969
|
+
);
|
|
9970
|
+
}),
|
|
9971
|
+
currentTimeVisible && /* @__PURE__ */ jsx(
|
|
9972
|
+
"div",
|
|
9973
|
+
{
|
|
9974
|
+
className: "pointer-events-none absolute right-0 left-0 z-20",
|
|
9975
|
+
style: { top: `${currentTimePosition}%` },
|
|
9976
|
+
children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
|
|
9977
|
+
/* @__PURE__ */ jsx("div", { className: "-left-1 absolute h-2 w-2 rounded-full bg-primary" }),
|
|
9978
|
+
/* @__PURE__ */ jsx("div", { className: "h-[2px] w-full bg-primary" })
|
|
9979
|
+
] })
|
|
9980
|
+
}
|
|
9981
|
+
),
|
|
9982
|
+
hours.map((hour) => {
|
|
9983
|
+
const hourValue = getHours(hour);
|
|
9984
|
+
return /* @__PURE__ */ jsx(
|
|
9985
|
+
"div",
|
|
9986
|
+
{
|
|
9987
|
+
className: "relative h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0",
|
|
9988
|
+
children: [0, 1, 2, 3].map((quarter) => {
|
|
9989
|
+
const quarterHourTime = hourValue + quarter * 0.25;
|
|
9990
|
+
return /* @__PURE__ */ jsx(
|
|
9991
|
+
DroppableCellAgenda,
|
|
9992
|
+
{
|
|
9993
|
+
className: cn(
|
|
9994
|
+
"absolute h-[calc(var(--week-cells-height)/4)] w-full",
|
|
9995
|
+
quarter === 0 && "top-0",
|
|
9996
|
+
quarter === 1 && "top-[calc(var(--week-cells-height)/4)]",
|
|
9997
|
+
quarter === 2 && "top-[calc(var(--week-cells-height)/4*2)]",
|
|
9998
|
+
quarter === 3 && "top-[calc(var(--week-cells-height)/4*3)]"
|
|
9999
|
+
),
|
|
10000
|
+
date: currentDate,
|
|
10001
|
+
id: `day-cell-${currentDate.toISOString()}-${quarterHourTime}`,
|
|
10002
|
+
onClick: () => {
|
|
10003
|
+
const startTime = new Date(currentDate);
|
|
10004
|
+
startTime.setHours(hourValue);
|
|
10005
|
+
startTime.setMinutes(quarter * 15);
|
|
10006
|
+
if (onEventCreate) onEventCreate(startTime);
|
|
10007
|
+
},
|
|
10008
|
+
time: quarterHourTime
|
|
10009
|
+
},
|
|
10010
|
+
`${hour.toString()}-${quarter}`
|
|
10011
|
+
);
|
|
10012
|
+
})
|
|
10013
|
+
},
|
|
10014
|
+
hour.toString()
|
|
10015
|
+
);
|
|
10016
|
+
})
|
|
10017
|
+
] }) : /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
9924
10018
|
positionedEvents.map((positionedEvent) => {
|
|
9925
10019
|
const evt = positionedEvent.event;
|
|
9926
10020
|
const eventStart = new Date(evt.start ?? evt.end ?? Date.now());
|
|
@@ -10274,7 +10368,8 @@ function EventAgenda({
|
|
|
10274
10368
|
onlyWeek,
|
|
10275
10369
|
onlyAgenda,
|
|
10276
10370
|
onlyYear,
|
|
10277
|
-
allowCellClick = true
|
|
10371
|
+
allowCellClick = true,
|
|
10372
|
+
allDayCell = false
|
|
10278
10373
|
}) {
|
|
10279
10374
|
const lockedView = onlyDay ? "day" : onlyMonth ? "month" : onlyWeek ? "week" : onlyAgenda ? "agenda" : onlyYear ? "year" : void 0;
|
|
10280
10375
|
const [currentDate, setCurrentDate] = useState(
|
|
@@ -10394,9 +10489,10 @@ function EventAgenda({
|
|
|
10394
10489
|
},
|
|
10395
10490
|
children: [
|
|
10396
10491
|
/* @__PURE__ */ jsxs(CalendarDndProviderAgenda, { onEventUpdate: handleEventUpdate, children: [
|
|
10397
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between
|
|
10398
|
-
/* @__PURE__ */
|
|
10399
|
-
|
|
10492
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-2 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4 sm:py-4", children: [
|
|
10493
|
+
/* @__PURE__ */ jsx("h2", { className: "font-semibold text-base sm:text-lg md:text-xl lg:text-2xl truncate", children: viewTitle }),
|
|
10494
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between sm:justify-end gap-2", children: [
|
|
10495
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
10400
10496
|
/* @__PURE__ */ jsx(
|
|
10401
10497
|
ButtonBase,
|
|
10402
10498
|
{
|
|
@@ -10418,21 +10514,18 @@ function EventAgenda({
|
|
|
10418
10514
|
}
|
|
10419
10515
|
)
|
|
10420
10516
|
] }),
|
|
10421
|
-
/* @__PURE__ */ jsx(
|
|
10422
|
-
|
|
10423
|
-
|
|
10424
|
-
|
|
10425
|
-
|
|
10426
|
-
|
|
10427
|
-
|
|
10428
|
-
|
|
10429
|
-
|
|
10430
|
-
|
|
10431
|
-
|
|
10432
|
-
|
|
10433
|
-
hideClear: true
|
|
10434
|
-
}
|
|
10435
|
-
) })
|
|
10517
|
+
!lockedView && /* @__PURE__ */ jsx(
|
|
10518
|
+
Select,
|
|
10519
|
+
{
|
|
10520
|
+
selected: activeView,
|
|
10521
|
+
onChange: (v) => setView(v),
|
|
10522
|
+
items: selectItems,
|
|
10523
|
+
placeholder: viewLabel(activeView),
|
|
10524
|
+
className: "min-w-24",
|
|
10525
|
+
hideClear: true
|
|
10526
|
+
}
|
|
10527
|
+
)
|
|
10528
|
+
] })
|
|
10436
10529
|
] }),
|
|
10437
10530
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col transition-all duration-200 ease-in-out", children: [
|
|
10438
10531
|
activeView === "month" && /* @__PURE__ */ jsx(
|
|
@@ -10457,6 +10550,7 @@ function EventAgenda({
|
|
|
10457
10550
|
events,
|
|
10458
10551
|
onEventSelect: handleEventSelect,
|
|
10459
10552
|
noTime,
|
|
10553
|
+
allDayCell,
|
|
10460
10554
|
onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
|
|
10461
10555
|
start: d,
|
|
10462
10556
|
end: d,
|
|
@@ -10472,6 +10566,7 @@ function EventAgenda({
|
|
|
10472
10566
|
events,
|
|
10473
10567
|
onEventSelect: handleEventSelect,
|
|
10474
10568
|
noTime,
|
|
10569
|
+
allDayCell,
|
|
10475
10570
|
onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
|
|
10476
10571
|
start: d,
|
|
10477
10572
|
end: d,
|
|
@@ -11178,6 +11273,7 @@ function WeekViewAgenda({
|
|
|
11178
11273
|
currentDate,
|
|
11179
11274
|
events,
|
|
11180
11275
|
onEventSelect,
|
|
11276
|
+
allDayCell = false,
|
|
11181
11277
|
onEventCreate,
|
|
11182
11278
|
showUndatedEvents,
|
|
11183
11279
|
noTime = false
|
|
@@ -11353,7 +11449,7 @@ function WeekViewAgenda({
|
|
|
11353
11449
|
))
|
|
11354
11450
|
] }),
|
|
11355
11451
|
showAllDaySection && /* @__PURE__ */ jsxs("div", { className: "border-border/70 border-b bg-muted/50", children: [
|
|
11356
|
-
trueAllDayEvents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-8", children: [
|
|
11452
|
+
trueAllDayEvents.length > 0 && !allDayCell && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-8", children: [
|
|
11357
11453
|
/* @__PURE__ */ jsx("div", { className: "relative border-border/70 border-r flex items-center justify-center p-1", children: /* @__PURE__ */ jsx("span", { className: "text-center text-[10px] text-muted-foreground/70 sm:text-xs", children: "Todo dia" }) }),
|
|
11358
11454
|
/* @__PURE__ */ jsxs(
|
|
11359
11455
|
"div",
|
|
@@ -11541,6 +11637,60 @@ function WeekViewAgenda({
|
|
|
11541
11637
|
className: "relative grid auto-cols-fr border-border/70 border-r last:border-r-0",
|
|
11542
11638
|
"data-today": isToday(day) || void 0,
|
|
11543
11639
|
children: [
|
|
11640
|
+
trueAllDayEvents.length > 0 && allDayCell && /* @__PURE__ */ jsx(Fragment, { children: trueAllDayEvents.filter(
|
|
11641
|
+
(event) => event.start?.toLocaleDateString() == new Date(day).toLocaleDateString()
|
|
11642
|
+
)?.map((event) => {
|
|
11643
|
+
const eventStart = new Date(event.start);
|
|
11644
|
+
const eventEnd = new Date(
|
|
11645
|
+
new Date(event.end).setHours(23, 59)
|
|
11646
|
+
);
|
|
11647
|
+
const isFirstDay = isSameDay(currentDate, eventStart);
|
|
11648
|
+
const isLastDay = isSameDay(currentDate, eventEnd);
|
|
11649
|
+
return /* @__PURE__ */ jsx(
|
|
11650
|
+
"div",
|
|
11651
|
+
{
|
|
11652
|
+
className: "absolute z-10 px-0.5",
|
|
11653
|
+
style: {
|
|
11654
|
+
height: "100%",
|
|
11655
|
+
width: "100%",
|
|
11656
|
+
padding: "10px"
|
|
11657
|
+
},
|
|
11658
|
+
children: /* @__PURE__ */ jsx(TooltipProviderBase, { delayDuration: 400, children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
|
|
11659
|
+
/* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "size-full", children: /* @__PURE__ */ jsx(
|
|
11660
|
+
EventItemAgenda,
|
|
11661
|
+
{
|
|
11662
|
+
event,
|
|
11663
|
+
view: "day",
|
|
11664
|
+
isFirstDay,
|
|
11665
|
+
isLastDay,
|
|
11666
|
+
onClick: (e) => handleEventClick(event, e),
|
|
11667
|
+
noTime,
|
|
11668
|
+
className: "flex justify-start items-start rounded-sm py-1"
|
|
11669
|
+
}
|
|
11670
|
+
) }) }),
|
|
11671
|
+
/* @__PURE__ */ jsxs(
|
|
11672
|
+
TooltipContentBase,
|
|
11673
|
+
{
|
|
11674
|
+
side: "top",
|
|
11675
|
+
sideOffset: 6,
|
|
11676
|
+
className: "max-w-[220px] space-y-0.5",
|
|
11677
|
+
children: [
|
|
11678
|
+
/* @__PURE__ */ jsx("p", { className: "font-semibold text-sm leading-snug", children: event.title }),
|
|
11679
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs opacity-90", children: formatDurationAgenda(event) }),
|
|
11680
|
+
event.location && /* @__PURE__ */ jsxs("p", { className: "text-xs flex items-center gap-2", children: [
|
|
11681
|
+
/* @__PURE__ */ jsx(MapPinIcon$1, { size: 15 }),
|
|
11682
|
+
" ",
|
|
11683
|
+
event.location
|
|
11684
|
+
] }),
|
|
11685
|
+
event.description && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-75 line-clamp-2", children: event.description })
|
|
11686
|
+
]
|
|
11687
|
+
}
|
|
11688
|
+
)
|
|
11689
|
+
] }) })
|
|
11690
|
+
},
|
|
11691
|
+
`spanning-${event.id}`
|
|
11692
|
+
);
|
|
11693
|
+
}) }),
|
|
11544
11694
|
(processedDayEvents[dayIndex] ?? []).map((positionedEvent) => {
|
|
11545
11695
|
const timeLabel = formatDurationAgenda(positionedEvent.event);
|
|
11546
11696
|
return /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(TooltipBase, { delayDuration: 250, children: [
|