@nomideusz/svelte-calendar 0.10.0 → 0.11.0
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/calendar/Calendar.svelte +39 -5
- package/dist/views/agenda/AgendaDay.svelte +68 -16
- package/dist/views/agenda/AgendaWeek.svelte +166 -67
- package/dist/views/mobile/MobileDay.svelte +11 -3
- package/dist/views/mobile/MobileWeek.svelte +6 -0
- package/dist/views/mobile/swipe.d.ts +1 -0
- package/dist/views/mobile/swipe.js +9 -0
- package/dist/views/month/MonthGrid.svelte +35 -2
- package/package.json +1 -1
- package/widget/widget.js +694 -649
|
@@ -31,7 +31,8 @@ const eventSnippet = $derived(ctx.eventSnippet);
|
|
|
31
31
|
const loadRangeCtx = $derived(ctx.loadRange);
|
|
32
32
|
const clock = createClock(ctx.timezone);
|
|
33
33
|
const todayMs = $derived(clock.today);
|
|
34
|
-
const
|
|
34
|
+
const dotsMode = $derived(isMobile);
|
|
35
|
+
const MAX_CHIPS = 3;
|
|
35
36
|
const range = $derived(viewState?.range);
|
|
36
37
|
const focusMonth = $derived((focusDate ?? /* @__PURE__ */ new Date()).getMonth());
|
|
37
38
|
$effect(() => {
|
|
@@ -157,6 +158,7 @@ function chipTime(e) {
|
|
|
157
158
|
<div
|
|
158
159
|
class="mg"
|
|
159
160
|
class:mg--auto={autoHeight}
|
|
161
|
+
class:mg--dots={dotsMode}
|
|
160
162
|
style={style || undefined}
|
|
161
163
|
style:height={autoHeight ? undefined : height ? `${height}px` : '100%'}
|
|
162
164
|
role="grid"
|
|
@@ -223,6 +225,7 @@ function chipTime(e) {
|
|
|
223
225
|
class:mg-chip--cancelled={ev.status === 'cancelled'}
|
|
224
226
|
style:--mg-chip-color={ev.color ?? 'var(--dt-accent)'}
|
|
225
227
|
title={ev.title}
|
|
228
|
+
aria-label="{ev.title}{chipTime(ev) ? `, ${chipTime(ev)}` : ''}"
|
|
226
229
|
onclick={(e) => {
|
|
227
230
|
e.stopPropagation();
|
|
228
231
|
oneventclick?.(ev);
|
|
@@ -240,9 +243,10 @@ function chipTime(e) {
|
|
|
240
243
|
type="button"
|
|
241
244
|
class="mg-more"
|
|
242
245
|
aria-expanded={ondayclick ? undefined : false}
|
|
246
|
+
aria-label={L.nMore(cell.overflow)}
|
|
243
247
|
onclick={(e) => overflowClick(e, cell)}
|
|
244
248
|
>
|
|
245
|
-
{L.nMore(cell.overflow)}
|
|
249
|
+
{dotsMode ? `+${cell.overflow}` : L.nMore(cell.overflow)}
|
|
246
250
|
</button>
|
|
247
251
|
{:else if expandedMs === cell.ms}
|
|
248
252
|
<button
|
|
@@ -467,4 +471,33 @@ function chipTime(e) {
|
|
|
467
471
|
min-height: 30px;
|
|
468
472
|
}
|
|
469
473
|
}
|
|
474
|
+
|
|
475
|
+
/* ── Dots mode (mobile) ─────────────────────────────
|
|
476
|
+
Cells are too narrow for text chips, so events render as colored
|
|
477
|
+
dots in a wrapping row. The cell itself stays the tap target
|
|
478
|
+
(day drill-down); dots keep their title/aria-label for a11y. */
|
|
479
|
+
.mg--dots .mg-chips {
|
|
480
|
+
flex-direction: row;
|
|
481
|
+
flex-wrap: wrap;
|
|
482
|
+
align-items: center;
|
|
483
|
+
gap: 3px;
|
|
484
|
+
}
|
|
485
|
+
.mg--dots .mg-chip {
|
|
486
|
+
padding: 3px;
|
|
487
|
+
min-height: 0;
|
|
488
|
+
}
|
|
489
|
+
.mg--dots .mg-chip-title,
|
|
490
|
+
.mg--dots .mg-chip-time {
|
|
491
|
+
display: none;
|
|
492
|
+
}
|
|
493
|
+
.mg--dots .mg-chip-dot {
|
|
494
|
+
width: 8px;
|
|
495
|
+
height: 8px;
|
|
496
|
+
}
|
|
497
|
+
.mg--dots .mg-more {
|
|
498
|
+
padding: 0 3px;
|
|
499
|
+
min-height: 0;
|
|
500
|
+
align-self: center;
|
|
501
|
+
font-size: 10px;
|
|
502
|
+
}
|
|
470
503
|
</style>
|