@arquimedes.co/eureka-forms 3.0.53-new-steps → 3.0.54-new-steps
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.
|
@@ -17,11 +17,7 @@ const AVAILABILITY_CATS = [
|
|
|
17
17
|
CalendarEventCategory.PHYSICAL,
|
|
18
18
|
CalendarEventCategory.VIRTUAL,
|
|
19
19
|
];
|
|
20
|
-
const EVENT_CATS = [
|
|
21
|
-
CalendarEventCategory.MEETING,
|
|
22
|
-
CalendarEventCategory.BUSY,
|
|
23
|
-
CalendarEventCategory.CUSTOM,
|
|
24
|
-
];
|
|
20
|
+
const EVENT_CATS = [CalendarEventCategory.MEETING, CalendarEventCategory.BUSY, CalendarEventCategory.CUSTOM];
|
|
25
21
|
const VIEW_LABELS = {
|
|
26
22
|
[CalendarDefaultView.DAY]: 'Día',
|
|
27
23
|
[CalendarDefaultView.WEEK]: 'Semana',
|
|
@@ -50,7 +46,7 @@ function ErkCalendar({ value, onChange, defaultView = CalendarDefaultView.WEEK,
|
|
|
50
46
|
const views = useMemo(() => enabledViews?.length
|
|
51
47
|
? enabledViews
|
|
52
48
|
: [CalendarDefaultView.DAY, CalendarDefaultView.WEEK, CalendarDefaultView.MONTH], [enabledViews]);
|
|
53
|
-
const categories = useMemo(() => allowedCategories?.length ? allowedCategories : Object.values(CalendarEventCategory), [allowedCategories]);
|
|
49
|
+
const categories = useMemo(() => (allowedCategories?.length ? allowedCategories : Object.values(CalendarEventCategory)), [allowedCategories]);
|
|
54
50
|
const availabilityCategories = AVAILABILITY_CATS.filter((c) => categories.includes(c));
|
|
55
51
|
const eventCategories = EVENT_CATS.filter((c) => categories.includes(c));
|
|
56
52
|
const bookableTemplates = eventTemplates?.filter((t) => t.bookable) ?? [];
|
|
@@ -197,49 +193,43 @@ function ErkCalendar({ value, onChange, defaultView = CalendarDefaultView.WEEK,
|
|
|
197
193
|
return (_jsx("button", { type: "button", className: cls, onClick: () => goToDay(day), children: format(day, 'd') }, day.toISOString()));
|
|
198
194
|
})] })] }));
|
|
199
195
|
};
|
|
200
|
-
const renderSidebar = () => (_jsxs("aside", { className: styles.side, children: [!readOnly &&
|
|
196
|
+
const renderSidebar = () => (_jsxs("aside", { className: styles.side, children: [!readOnly && _jsx(ErkButton, { text: "+ Nuevo evento", sx: { width: '100%' }, onClick: handleNewEvent }), renderMiniCalendar(), (availabilityCategories.length > 0 || bookableTemplates.length > 0) && (_jsxs("div", { className: styles.sideList, children: [_jsx("span", { className: styles.sideLbl, children: "Disponibilidad" }), availabilityCategories.map((cat) => renderSidebarItem(`cat:${cat}`, CATEGORY_COLORS[cat], CATEGORY_LABELS[cat])), bookableTemplates.map((t) => renderSidebarItem(`tpl:${t.id}`, t.color ?? CATEGORY_COLORS[t.category], t.name))] })), (eventCategories.length > 0 || otherTemplates.length > 0) && (_jsxs("div", { className: styles.sideList, children: [_jsx("span", { className: styles.sideLbl, children: "Eventos" }), eventCategories.map((cat) => renderSidebarItem(`cat:${cat}`, CATEGORY_COLORS[cat], CATEGORY_LABELS[cat])), otherTemplates.map((t) => renderSidebarItem(`tpl:${t.id}`, t.color ?? CATEGORY_COLORS[t.category], t.name))] })), sources && sources.length > 0 && (_jsxs("div", { className: styles.sideList, children: [_jsx("span", { className: styles.sideLbl, children: "Compartidos" }), sources.map((s) => renderSidebarItem(`src:${s.id}`, s.color ?? '#98a2b3', s.name))] }))] }));
|
|
201
197
|
// ------------------------------------------------------------------
|
|
202
198
|
// Time grid (day / week)
|
|
203
199
|
// ------------------------------------------------------------------
|
|
204
200
|
const renderTimeGrid = () => {
|
|
205
201
|
const allDayByDay = visibleDays.map((day) => eventsForDay(day).filter(({ event }) => event.isAllDay));
|
|
206
202
|
const hasAllDay = allDayByDay.some((list) => list.length > 0);
|
|
207
|
-
return (
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
(
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
(
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
const busy = event.category === CalendarEventCategory.BUSY;
|
|
238
|
-
return (_jsxs("div", { className: busy ? `${styles.event} ${styles.eventBusy}` : styles.event, style: busy
|
|
239
|
-
? { top, height }
|
|
240
|
-
: { top, height, backgroundColor: color }, onClick: (e) => openDetail(e, event, own), children: [_jsx("span", { className: styles.eventTitle, children: eventLabel(event, eventTemplates) }), _jsxs("span", { className: styles.eventTime, children: [isoToHHMM(event.start), " \u2013 ", isoToHHMM(event.end)] })] }, key));
|
|
241
|
-
})] }, day.toISOString()));
|
|
242
|
-
})] })] }));
|
|
203
|
+
return (_jsx("div", { className: styles.cal, children: _jsxs("div", { className: styles.calScroll, children: [_jsxs("div", { className: styles.calSticky, children: [_jsxs("div", { className: styles.calHead, style: { gridTemplateColumns: `54px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.gutter }), visibleDays.map((day) => (_jsxs("button", { type: "button", className: styles.dayHead, onClick: () => {
|
|
204
|
+
goToDay(day);
|
|
205
|
+
setView(CalendarDefaultView.DAY);
|
|
206
|
+
}, children: [_jsx("span", { className: styles.dayHeadDow, children: format(day, 'EEE', { locale: es }) }), _jsx("span", { className: isToday(day)
|
|
207
|
+
? `${styles.dayHeadNum} ${styles.dayHeadToday}`
|
|
208
|
+
: styles.dayHeadNum, children: format(day, 'd') })] }, day.toISOString())))] }), hasAllDay && (_jsxs("div", { className: styles.allDayRow, style: { gridTemplateColumns: `54px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.allDayLbl, children: "D\u00EDa" }), allDayByDay.map((list, i) => (_jsx("div", { className: styles.allDayCell, children: list.map(({ event, own }) => (_jsx("button", { type: "button", className: styles.allDayChip, style: { backgroundColor: eventColor(event, eventTemplates) }, onClick: (e) => openDetail(e, event, own), children: eventLabel(event, eventTemplates) }, `${own ? 'own' : 'src'}-${event.id}`))) }, visibleDays[i].toISOString())))] }))] }), _jsxs("div", { className: styles.grid, style: { gridTemplateColumns: `54px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.timeCol, children: hours.map((h) => (_jsx("div", { className: styles.hourLabel, style: { height: CELL_HEIGHT }, children: h > 0 ? `${h}:00` : '' }, h))) }), visibleDays.map((day) => {
|
|
209
|
+
const dayEvents = eventsForDay(day).filter(({ event }) => !event.isAllDay);
|
|
210
|
+
const fallback = businessFallbackFor(day, dayEvents);
|
|
211
|
+
return (_jsxs("div", { className: styles.dayCol, style: { height: hours.length * CELL_HEIGHT }, onClick: (e) => handleGridClick(e, day), children: [hours.map((h) => (_jsx("div", { className: styles.hourCell, style: { height: CELL_HEIGHT } }, h))), fallback && businessDays && (_jsx("div", { className: `${styles.avail} ${styles.availFallback}`, style: {
|
|
212
|
+
top: (toMinutes(businessDays.start) - minHour * 60) * (CELL_HEIGHT / 60),
|
|
213
|
+
height: (toMinutes(businessDays.end) - toMinutes(businessDays.start)) *
|
|
214
|
+
(CELL_HEIGHT / 60),
|
|
215
|
+
}, children: _jsx("span", { className: styles.availTag, children: "D\u00EDas h\u00E1biles" }) })), dayEvents.map(({ event, own }) => {
|
|
216
|
+
const key = `${own ? 'own' : 'src'}-${event.id}`;
|
|
217
|
+
const top = (toMinutes(isoToHHMM(event.start)) - minHour * 60) * (CELL_HEIGHT / 60);
|
|
218
|
+
const height = Math.max((toMinutes(isoToHHMM(event.end)) - toMinutes(isoToHHMM(event.start))) *
|
|
219
|
+
(CELL_HEIGHT / 60), 20);
|
|
220
|
+
const color = eventColor(event, eventTemplates);
|
|
221
|
+
if (isAvailability(event.category)) {
|
|
222
|
+
return (_jsx("div", { className: styles.avail, style: {
|
|
223
|
+
top,
|
|
224
|
+
height,
|
|
225
|
+
borderLeftColor: color,
|
|
226
|
+
backgroundImage: `repeating-linear-gradient(-45deg, ${color}1a, ${color}1a 6px, ${color}0d 6px, ${color}0d 12px)`,
|
|
227
|
+
}, onClick: (e) => openDetail(e, event, own), children: _jsx("span", { className: styles.availTag, style: { color }, children: eventLabel(event, eventTemplates) }) }, key));
|
|
228
|
+
}
|
|
229
|
+
const busy = event.category === CalendarEventCategory.BUSY;
|
|
230
|
+
return (_jsxs("div", { className: busy ? `${styles.event} ${styles.eventBusy}` : styles.event, style: busy ? { top, height } : { top, height, backgroundColor: color }, onClick: (e) => openDetail(e, event, own), children: [_jsx("span", { className: styles.eventTitle, children: eventLabel(event, eventTemplates) }), _jsxs("span", { className: styles.eventTime, children: [isoToHHMM(event.start), " \u2013 ", isoToHHMM(event.end)] })] }, key));
|
|
231
|
+
})] }, day.toISOString()));
|
|
232
|
+
})] })] }) }));
|
|
243
233
|
};
|
|
244
234
|
// ------------------------------------------------------------------
|
|
245
235
|
// Month view
|
|
@@ -258,9 +248,7 @@ function ErkCalendar({ value, onChange, defaultView = CalendarDefaultView.WEEK,
|
|
|
258
248
|
: `${styles.monthCell} ${styles.monthCellOut}`, onClick: () => {
|
|
259
249
|
goToDay(day);
|
|
260
250
|
setView(CalendarDefaultView.DAY);
|
|
261
|
-
}, children: [_jsx("span", { className: isToday(day)
|
|
262
|
-
? `${styles.monthNum} ${styles.dayHeadToday}`
|
|
263
|
-
: styles.monthNum, children: format(day, 'd') }), dayEvents.slice(0, 3).map(({ event, own }) => (_jsx("span", { className: styles.monthEvent, style: { backgroundColor: eventColor(event, eventTemplates) }, children: eventLabel(event, eventTemplates) }, `${own ? 'own' : 'src'}-${event.id}`))), dayEvents.length > 3 && (_jsxs("span", { className: styles.monthMore, children: ["+", dayEvents.length - 3, " m\u00E1s"] }))] }, day.toISOString()));
|
|
251
|
+
}, children: [_jsx("span", { className: isToday(day) ? `${styles.monthNum} ${styles.dayHeadToday}` : styles.monthNum, children: format(day, 'd') }), dayEvents.slice(0, 3).map(({ event, own }) => (_jsx("span", { className: styles.monthEvent, style: { backgroundColor: eventColor(event, eventTemplates) }, children: eventLabel(event, eventTemplates) }, `${own ? 'own' : 'src'}-${event.id}`))), dayEvents.length > 3 && (_jsxs("span", { className: styles.monthMore, children: ["+", dayEvents.length - 3, " m\u00E1s"] }))] }, day.toISOString()));
|
|
264
252
|
})] }));
|
|
265
253
|
};
|
|
266
254
|
// ------------------------------------------------------------------
|
|
@@ -272,7 +260,7 @@ function ErkCalendar({ value, onChange, defaultView = CalendarDefaultView.WEEK,
|
|
|
272
260
|
.map((day) => ({ day, dayEvents: eventsForDay(day) }))
|
|
273
261
|
.filter(({ dayEvents }) => dayEvents.length > 0);
|
|
274
262
|
if (withEvents.length === 0) {
|
|
275
|
-
return
|
|
263
|
+
return _jsxs("div", { className: styles.agendaEmpty, children: ["Sin eventos en los pr\u00F3ximos ", AGENDA_DAYS, " d\u00EDas."] });
|
|
276
264
|
}
|
|
277
265
|
return (_jsx("div", { className: styles.agenda, children: withEvents.map(({ day, dayEvents }) => (_jsxs("div", { className: styles.agendaDay, children: [_jsx("div", { className: styles.agendaDayLabel, children: capitalize(format(day, 'EEEE d MMM', { locale: es })) }), dayEvents
|
|
278
266
|
.slice()
|
|
@@ -201,6 +201,18 @@
|
|
|
201
201
|
overflow: hidden;
|
|
202
202
|
background: var(--eureka-bg, #fff);
|
|
203
203
|
}
|
|
204
|
+
/* Un solo contenedor con scroll para encabezado + fila de día + grid: las tres
|
|
205
|
+
filas comparten ancho (y scrollbar), así las columnas nunca se descuadran. */
|
|
206
|
+
.calScroll {
|
|
207
|
+
max-height: 520px;
|
|
208
|
+
overflow-y: auto;
|
|
209
|
+
}
|
|
210
|
+
.calSticky {
|
|
211
|
+
position: sticky;
|
|
212
|
+
top: 0;
|
|
213
|
+
z-index: 3;
|
|
214
|
+
background: var(--eureka-bg, #fff);
|
|
215
|
+
}
|
|
204
216
|
.calHead {
|
|
205
217
|
display: grid;
|
|
206
218
|
border-bottom: 1px solid var(--eureka-outline, #eceff3);
|
|
@@ -249,8 +261,6 @@
|
|
|
249
261
|
|
|
250
262
|
.grid {
|
|
251
263
|
display: grid;
|
|
252
|
-
max-height: 520px;
|
|
253
|
-
overflow-y: auto;
|
|
254
264
|
}
|
|
255
265
|
.timeCol {
|
|
256
266
|
border-right: 1px solid var(--eureka-outline, #eceff3);
|
|
@@ -744,7 +754,7 @@
|
|
|
744
754
|
overflow-x: auto;
|
|
745
755
|
}
|
|
746
756
|
/* La semana necesita ancho real: scroll horizontal con columnas usables */
|
|
747
|
-
.
|
|
757
|
+
.calSticky,
|
|
748
758
|
.grid {
|
|
749
759
|
min-width: 640px;
|
|
750
760
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arquimedes.co/eureka-forms",
|
|
3
3
|
"repository": "git://github.com/Arquimede5/Eureka-Forms.git",
|
|
4
|
-
"version":"3.0.
|
|
4
|
+
"version":"3.0.54-new-steps",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"watch": "tsgo --noEmit --watch --project tsconfig.app.json",
|
|
7
7
|
"start": "vite",
|