runeforge 0.0.30 → 0.0.32

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

@@ -207,6 +207,8 @@
 		...actions.map((action) => ({
 			label: action.label,
 			icon: action.icon,
+			toggle: action.toggle,
+			class: action.class,
 			condition: action.condition,
 			run: (item: T) => onAction?.(action, item)
 		})),
@@ -230,22 +232,39 @@
 </script>
 
 {#snippet actionsCell(item: T)}
-	<div class="flex justify-end gap-1">
+	<div class="flex justify-end items-center gap-1">
 		{#each rowActions as action (action.label)}
 			{#if action.condition?.(item) ?? true}
-				{@const Icon = action.icon}
-				<Button
-					variant="ghost"
-					class={['btn-xs', action.class]}
-					title={action.label}
-					aria-label={action.label}
-					onclick={(e) => {
-						e.stopPropagation();
-						action.run(item);
-					}}
-				>
-					<Icon class="size-4" />
-				</Button>
+				{@const resolvedClass =
+					typeof action.class === 'function' ? action.class(item) : action.class}
+				{#if action.toggle}
+					<input
+						type="checkbox"
+						class={['toggle toggle-sm', resolvedClass]}
+						title={action.label}
+						aria-label={action.label}
+						checked={action.toggle(item)}
+						onclick={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							action.run(item);
+						}}
+					/>
+				{:else}
+					{@const Icon = action.icon}
+					<Button
+						variant="ghost"
+						class={['btn-xs', resolvedClass]}
+						title={action.label}
+						aria-label={action.label}
+						onclick={(e) => {
+							e.stopPropagation();
+							action.run(item);
+						}}
+					>
+						<Icon class="size-4" />
+					</Button>
+				{/if}
 			{/if}
 		{/each}
 	</div>

package/dist/types/crud.d.ts

@@ -62,7 +62,24 @@ export interface ActionConfiguration<T extends object = Record<string, unknown>>
 }
 export interface CustomAction<T extends object = Record<string, unknown>> {
     label: string;
-    icon: any;
+    /** Required unless `toggle` is set, which renders the action as a switch
+     * instead of an icon button. */
+    icon?: any;
+    /** Renders the row action as a real daisyUI toggle switch reflecting the
+     * item's current on/off state, instead of an icon button. Takes
+     * precedence over `icon` when both are set.
+     *
+     * The switch is controlled, not editable directly: clicking it never
+     * flips its own checked state, it still just calls `run` (opening `view`
+     * or navigating via `href`) like any other action. It only visually
+     * flips once the underlying item's data actually changes — e.g. after
+     * the action's modal confirms and the list reloads. */
+    toggle?: (item: T) => boolean;
+    /** Extra class(es) on the row action's button/switch — e.g. to color a
+     * `toggle` by the item's own state (`toggle-success`/`toggle-error`).
+     * Pass a function to resolve it per item; a plain string applies to
+     * every row alike. */
+    class?: string | ((item: T) => string);
     endpoint?: string;
     condition?: (item: T) => boolean;
     /** Renders as a modal-like panel when the action runs. Mutually exclusive
@@ -74,8 +91,11 @@ export interface CustomAction<T extends object = Record<string, unknown>> {
 }
 export interface RowAction<T extends object = Record<string, unknown>> {
     label: string;
-    icon: any;
-    class?: string;
+    icon?: any;
+    /** See `CustomAction.toggle` — same controlled-switch rendering. */
+    toggle?: (item: T) => boolean;
+    /** See `CustomAction.class`. */
+    class?: string | ((item: T) => string);
     condition?: (item: T) => boolean;
     run: (item: T) => void;
 }

package/package.json

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