@axium/calendar 0.5.0 → 0.5.3

package/dist/common.d.ts

@@ -137,6 +137,7 @@ export declare const Calendar: z.ZodObject<{
         user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
             id: z.ZodUUID;
             name: z.ZodString;
+            username: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             email: z.ZodOptional<z.ZodEmail>;
             emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
             preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
@@ -180,6 +181,7 @@ declare const CalendarAPI: {
                 user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
                     id: z.ZodUUID;
                     name: z.ZodString;
+                    username: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                     email: z.ZodOptional<z.ZodEmail>;
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
@@ -209,6 +211,7 @@ declare const CalendarAPI: {
                 user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
                     id: z.ZodUUID;
                     name: z.ZodString;
+                    username: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                     email: z.ZodOptional<z.ZodEmail>;
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
@@ -240,6 +243,7 @@ declare const CalendarAPI: {
                 user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
                     id: z.ZodUUID;
                     name: z.ZodString;
+                    username: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                     email: z.ZodOptional<z.ZodEmail>;
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
@@ -273,6 +277,7 @@ declare const CalendarAPI: {
                 user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
                     id: z.ZodUUID;
                     name: z.ZodString;
+                    username: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                     email: z.ZodOptional<z.ZodEmail>;
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
@@ -302,6 +307,7 @@ declare const CalendarAPI: {
                 user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
                     id: z.ZodUUID;
                     name: z.ZodString;
+                    username: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                     email: z.ZodOptional<z.ZodEmail>;
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{

package/lib/Event.svelte

@@ -32,8 +32,8 @@
 
 <Popover {id} onclick={e => e.stopPropagation()}>
 	{#snippet toggle()}
-		{@const start = event.start.getHours() * 60 + event.start.getMinutes()}
-		{@const end = event.end.getHours() * 60 + event.end.getMinutes()}
+		{const start = $derived(event.start.getHours() * 60 + event.start.getMinutes()),
+			end = $derived(event.end.getHours() * 60 + event.end.getMinutes())}
 		<div
 			class="Event"
 			style:top="{start / 14.4}%"

package/lib/Select.svelte

@@ -38,11 +38,11 @@
 			<div class="empty"></div>
 		{/each}
 		{#each { length: lastOfMonth.getDate() }, i}
-			{@const day = i + 1}
-			{@const year = view.getFullYear()}
-			{@const month = view.getMonth()}
-			{@const date = new Date(year, month, day)}
-			{@const WofY = weekOfYear(date, true)}
+			{const day = $derived(i + 1),
+				year = $derived(view.getFullYear()),
+				month = $derived(view.getMonth()),
+				date = $derived(new Date(year, month, day)),
+				WofY = $derived(weekOfYear(date, true))}
 			{#if date.getDay() == 0 && WofY != firstWeekOfMonth}
 				<div class={['w-of-y', WofY == weekOfYear(today, true) && 'current']}>{WofY}</div>
 			{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/calendar",
-	"version": "0.5.0",
+	"version": "0.5.3",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {

package/routes/calendar/+page.svelte

@@ -28,10 +28,10 @@
 		new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), Math.round(now.getMinutes() / 30) * 30, 0, 0)
 	);
 
-	let start = new SvelteDate(data.filter.start);
-	let end = new SvelteDate(data.filter.end);
-	let calendars = $state(data.calendars);
-	let events = $state<Event[]>([]);
+	let start = new SvelteDate(data.filter.start),
+		end = new SvelteDate(data.filter.end),
+		calendars = $state(data.calendars),
+		events = $state<Event[]>([]);
 
 	$effect(() => {
 		for (const cal of calendars) cal.color ||= encodeColor(colorHashHex(cal.name));
@@ -146,7 +146,7 @@
 			</button>
 		</div>
 		{#each calendars.filter(cal => cal.userId == user.id) as cal (cal.id)}
-			{@const edit = () => {
+			{const edit = () => {
 				calEditId = cal.id;
 				calInit = cal;
 				document.querySelector<HTMLDialogElement>('#cal-init')!.showModal();
@@ -224,7 +224,7 @@
 				<h4>{text('calendar.list_shared')}</h4>
 			</div>
 			{#each calendars.filter(cal => cal.userId != user.id) as cal (cal.id)}
-				{@const { list, icon } = getCalPermissionsInfo(cal, user)}
+				{const { list, icon } = $derived(getCalPermissionsInfo(cal, user))}
 				<dfn title={list}>
 					<Icon i={icon} />
 				</dfn>
@@ -263,14 +263,16 @@
 			<span class="hour empty"></span>
 		</div>
 		{#if span == 'week'}
-			{@const eventsForWeekDays = Object.groupBy(
-				events.filter(
-					e =>
-						!hiddenCalIds.has(e.calId) &&
-						e.start < new Date(weekDays[6].getFullYear(), weekDays[6].getMonth(), weekDays[6].getDate() + 1) &&
-						e.end > weekDays[0]
-				),
-				ev => ev.start.getDay()
+			{const eventsForWeekDays = $derived(
+				Object.groupBy(
+					events.filter(
+						e =>
+							!hiddenCalIds.has(e.calId) &&
+							e.start < new Date(weekDays[6].getFullYear(), weekDays[6].getMonth(), weekDays[6].getDate() + 1) &&
+							e.end > weekDays[0]
+					),
+					ev => ev.start.getDay()
+				)
 			)}
 			<div class="cal-content week">
 				{#each weekDays as day, i}
@@ -409,8 +411,7 @@
 			id="eventInit.description"
 			placeholder={text('event_init.description_placeholder')}
 			bind:value={eventInit.description}
-			{@attach dynamicRows()}
-		></textarea>
+			{@attach dynamicRows()}></textarea>
 	</div>
 </FormDialog>
 

package/routes/calendar/RecurrenceDialog.svelte

@@ -64,7 +64,7 @@
 	bind:dialog
 	id="recurrence-custom"
 	submitText={text('RecurrenceDialog.confirm')}
-	submit={async () => (eventInit.recurrence = buildRRule())}
+	submit={() => (eventInit.recurrence = buildRRule())}
 >
 	{#snippet header()}
 		<h3>{text('RecurrenceDialog.title')}</h3>
@@ -117,7 +117,7 @@
 
 	<div class="end-section">
 		<span class="subtle">{text('RecurrenceDialog.end.label')}</span>
-		<label>
+		<label class="end-row">
 			<input type="radio" bind:group={endType} value="never" />
 			{text('RecurrenceDialog.end.never')}
 		</label>

package/routes/calendar/RecurrenceSelect.svelte

@@ -29,9 +29,10 @@
 	value={recurrenceKind}
 	onchange={e => {
 		const { value } = e.currentTarget;
-		if (value === 'custom')
+		if (value === 'custom') {
 			e.currentTarget.value = recurrenceKind; // to prevent "Custom..." being shown when dialog cancelled
-		else if (value in recurrences) eventInit.recurrence = recurrences[value as keyof typeof recurrences];
+			dialog?.showModal();
+		} else if (value in recurrences) eventInit.recurrence = recurrences[value as keyof typeof recurrences];
 	}}
 >
 	<option value="none">{text('event_init.recurrence.none')}</option>
@@ -50,7 +51,7 @@
 			date: eventInit.start.toLocaleDateString('default', { month: 'long', day: 'numeric' }),
 		})}
 	</option>
-	<option value="custom" onclick={() => dialog?.showModal()}>
+	<option value="custom">
 		{text('event_init.recurrence.custom')}
 	</option>
 </select>

package/routes/calendar/cal.css

@@ -65,14 +65,12 @@ div.attendees {
 			flex: auto;
 		}
 
-		label {
+		> label {
 			flex: none;
 		}
 	}
 
-	input,
-	select,
-	textarea {
+	:is(input, select, textarea):not(#recurrence-custom *) {
 		width: 100%;
 	}