runeforge 0.0.35 → 0.0.37

package/dist/components/crud/Field.svelte

@@ -33,6 +33,7 @@
 	const datePopId = $props.id();
 	const dateAnchorName = `--date-anchor-${datePopId}`;
 	let datePopoverEl: HTMLElement | undefined = $state();
+	let calendarDateEl: (HTMLElement & { value: string }) | undefined = $state();
 
 	const name = $derived(readonly ? undefined : field.attribute);
 	const labelText = $derived(fieldLabel(field));
@@ -72,6 +73,22 @@
 	);
 	const isMultiValued = $derived(field.type === 'multiselect' || field.type === 'tree');
 
+	// cally's `change` event doesn't bubble, so the usual `onchange={...}` prop
+	// never fires — Svelte 5 delegates events like `change` to a listener on
+	// a shared ancestor, which only ever sees events that bubble up to it.
+	// Attaching directly on the element (same fix ColumnFilter's date-range
+	// picker already uses) sidesteps delegation entirely.
+	$effect(() => {
+		if (!calendarDateEl) return;
+		function handler() {
+			if (fieldDisabled) return;
+			record[field.attribute] = calendarDateEl!.value;
+			datePopoverEl?.hidePopover();
+		}
+		calendarDateEl.addEventListener('change', handler);
+		return () => calendarDateEl?.removeEventListener('change', handler);
+	});
+
 	$effect(() => {
 		if (!field.dependentOptions || isMultiValued) return;
 		const current = record[field.attribute];
@@ -193,12 +210,8 @@
 				>
 					<calendar-date
 						class="cally"
+						bind:this={calendarDateEl}
 						value={String(record[field.attribute] ?? '')}
-						onchange={(e: Event) => {
-							if (fieldDisabled) return;
-							record[field.attribute] = (e.currentTarget as HTMLElement & { value: string }).value;
-							datePopoverEl?.hidePopover();
-						}}
 					>
 						<svg
 							aria-label={strings.previous}

package/dist/components/crud/GenericCRUD.svelte

@@ -121,6 +121,7 @@
 	);
 
 	let activeAction = $state<{ action: CustomAction<T>; item: T } | null>(null);
+	let activeBulkAction = $state<{ action: CustomBulkAction<T>; items: T[] } | null>(null);
 
 	async function runAction(action: CustomAction<T>, item: T) {
 		if (!(action.condition?.(item) ?? true)) return;
@@ -131,6 +132,10 @@
 		activeAction = { action, item };
 	}
 
+	function runBulkAction(action: CustomBulkAction<T>, items: T[]) {
+		activeBulkAction = { action, items };
+	}
+
 	async function navList() {
 		await goto('?');
 	}
@@ -293,7 +298,9 @@
 	);
 
 	const serverError = $derived(
-		creating || reading || editing || activeAction !== null ? (form?.error ?? '') : ''
+		creating || reading || editing || activeAction !== null || activeBulkAction !== null
+			? (form?.error ?? '')
+			: ''
 	);
 </script>
 
@@ -359,6 +366,7 @@
 		onEdit={navEdit}
 		onView={navRead}
 		onAction={runAction}
+		onBulkAction={runBulkAction}
 	/>
 {/if}
 
@@ -373,3 +381,15 @@
 		onSuccess={() => (activeAction = null)}
 	/>
 {/if}
+
+{#if activeBulkAction !== null}
+	{@const BulkActionView = activeBulkAction.action.view}
+	<BulkActionView
+		items={activeBulkAction.items}
+		label={activeBulkAction.action.label}
+		endpoint={activeBulkAction.action.endpoint}
+		{serverError}
+		onCancel={() => (activeBulkAction = null)}
+		onSuccess={() => (activeBulkAction = null)}
+	/>
+{/if}

package/dist/components/crud/views/List.svelte

@@ -52,7 +52,8 @@
 		onCreate,
 		onEdit,
 		onView,
-		onAction
+		onAction,
+		onBulkAction
 	}: {
 		data?: T[];
 		labelOne?: string;
@@ -85,6 +86,7 @@
 		onEdit?: (item: T) => void;
 		onView?: (item: T) => void;
 		onAction?: (action: CustomAction<T>, item: T) => void;
+		onBulkAction?: (action: CustomBulkAction<T>, items: T[]) => void;
 	} = $props();
 
 	const icons = $derived(getIconSet() ?? defaultIconSet);
@@ -97,7 +99,7 @@
 	const updateLabel = $derived(update.label ?? strings.edit);
 	const readLabel = $derived(read.label ?? strings.view);
 	const showRowActions = $derived(allowRead || allowUpdate || allowDelete || actions.length > 0);
-	const allowSelection = $derived(allowDelete || customBulkActions.length > 0);
+	const allowSelection = $derived(allowDelete || customBulkActions.some((action) => !action.view));
 
 	let selected = new SvelteSet<number>();
 	let pendingDeletion = $state<T[] | null>(null);
@@ -179,6 +181,7 @@
 	}
 
 	async function runBulkAction(action: CustomBulkAction<T>, items: T[]) {
+		if (!action.endpoint) return;
 		await runEndpointAction(action.endpoint, items);
 	}
 
@@ -192,6 +195,10 @@
 
 	function handleBulkAction(action: CustomBulkAction<T>) {
 		const items = selectedItems;
+		if (action.view) {
+			onBulkAction?.(action, items);
+			return;
+		}
 		selected.clear();
 		requestBulkAction(action, items);
 	}
@@ -324,11 +331,13 @@
 					<Button
 						variant={bulkAction.variant ?? 'ghost'}
 						class="btn-outline"
-						disabled={selected.size === 0}
+						disabled={!bulkAction.view && selected.size === 0}
 						onclick={() => handleBulkAction(bulkAction)}
 					>
 						<BulkIcon class="size-4" />
-						{bulkAction.label} ({selected.size})
+						{bulkAction.label}{#if !bulkAction.view}
+							({selected.size})
+						{/if}
 					</Button>
 				{/if}
 			{/each}

package/dist/components/crud/views/List.svelte.d.ts

@@ -36,6 +36,7 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         onEdit?: (item: T) => void;
         onView?: (item: T) => void;
         onAction?: (action: CustomAction<T>, item: T) => void;
+        onBulkAction?: (action: CustomBulkAction<T>, items: T[]) => void;
     };
     exports: {};
     bindings: "";

package/dist/types/crud.d.ts

@@ -102,10 +102,20 @@ export interface RowAction<T extends object = Record<string, unknown>> {
 export interface CustomBulkAction<T extends object = Record<string, unknown>> {
     label: string;
     icon: any;
-    endpoint: string;
+    /** Required unless `view` is set. */
+    endpoint?: string;
     variant?: string;
     confirm?: boolean;
     condition?: (items: T[]) => boolean;
+    /** Renders as a modal-like panel when the action runs, instead of POSTing
+     * to `endpoint` once per selected item. Mutually exclusive with
+     * `endpoint` — provide exactly one of the two, mirroring `CustomAction.view`.
+     *
+     * Unlike the endpoint-loop behavior, a `view` action never requires a
+     * pre-existing selection: the button is enabled even with nothing
+     * selected, and `confirm` is ignored (the view owns its own flow). The
+     * component receives the current selection as `items` (possibly empty). */
+    view?: Component<any>;
 }
 export interface SearchConfiguration {
     param?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",