@lobb-js/studio 0.40.0 → 0.42.0

package/src/lib/components/dataTable/sort.svelte

@@ -4,7 +4,7 @@
     import * as Popover from "../ui/popover/index.js";
     import * as Select from "../ui/select/index.js";
     import { GripVertical, Plus, X } from "lucide-svelte";
-    import Button, { buttonVariants } from "../ui/button/button.svelte";
+    import Button from "../ui/button/button.svelte";
     import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
     import { dndzone } from "svelte-dnd-action";
@@ -205,17 +205,13 @@
         </div>
     {/if}
 </div>
-<div class="flex justify-between border-t p-2">
+<div class="flex justify-between px-3 pb-3">
     {#if getFieldNames().length}
         <Popover.Root bind:open={popoverOpen}>
             <Popover.Trigger
-                class={buttonVariants({
-                    variant: "ghost",
-                    size: "sm",
-                    class: "text-muted-foreground",
-                })}
+                class="inline-flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
             >
-                <Plus />
+                <Plus size="14" />
                 Add a sort rule
             </Popover.Trigger>
             <Popover.Content class="w-64 p-2">
@@ -231,7 +227,7 @@
             </Popover.Content>
         </Popover.Root>
     {:else}
-        <div class="flex items-center text-xs text-muted-foreground">
+        <div class="px-2 py-1 text-xs text-muted-foreground">
             All columns have been added
         </div>
     {/if}

package/src/lib/components/dataTable/sortButton.svelte

@@ -22,7 +22,6 @@
 
 	function pick(fieldName: string) {
 		sort = { ...sort, [fieldName]: "asc" };
-		popoverOpen = false;
 	}
 </script>
 

package/src/lib/components/dataTable/table.svelte

@@ -41,6 +41,9 @@
 		parentWidth?: number;
 		select?: Select;
 		tableWidth?: number;
+
+		// recording mode row visuals — cellIndex 0 = tools cell, 1+ = data/action cells
+		onCellClass?: (entry: Entry, cellIndex: number) => string;
 	}
 </script>
 
@@ -79,6 +82,7 @@
 		collapsible,
 		select,
 		tableWidth = $bindable(),
+		onCellClass,
 	}: TableProps = $props();
 
 	let expandedRows: boolean[] = $state(new Array(data.length).fill(false));
@@ -183,7 +187,7 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				bg-muted
+				bg-muted/50
 			"
 		>
 			<!-- collapsable toggle -->
@@ -208,7 +212,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				bg-muted
+				bg-muted/50
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -235,7 +239,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				bg-muted
+				bg-muted/50
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -247,12 +251,7 @@
 			{@const lastRow = data.length - 1 === index}
 			{#if selectedRecords || tools}
 				<div
-					class="
-						sticky left-0
-						flex items-center p-2.5 text-xs h-10
-						bg-card
-						border-r gap-2
-					"
+					class="sticky left-0 flex items-center p-2.5 text-xs h-10 bg-card border-r gap-2 {onCellClass?.(entry, 0) ?? ''}"
 				>
 					<!-- collapsable toggle -->
 					{#if showCollapsible}
@@ -294,12 +293,7 @@
 					onclick={() => {
 						select?.onSelect(entry);
 					}}
-					class="
-						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
-						{select ? 'cursor-pointer hover:bg-accent' : ''}
-						bg-card
-						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
-					"
+					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
 				>
 					{#if overrideCell}
 						{@render overrideCell(fieldValue, column, entry)}
@@ -310,12 +304,7 @@
 			{/each}
 			{#if rowActions}
 				<div
-					class="
-						sticky right-0 z-10
-						flex items-center p-2.5 text-xs h-10
-						border-l gap-2
-						bg-card
-					"
+					class="sticky right-0 z-10 flex items-center p-2.5 text-xs h-10 border-l gap-2 bg-card {onCellClass?.(entry, columns.length + 1) ?? ''}"
 				>
 					{@render rowActions?.(entry, index)}
 				</div>

package/src/lib/components/detailView/create/createDetailView.svelte

@@ -14,6 +14,7 @@
         submitButton?: SubmitButton;
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
+        onCreated?: (record: any) => Promise<void>;
         onCancel?: () => Promise<void>;
         onChanges?: (changes: Changes) => void;
     }
@@ -25,6 +26,8 @@
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import { untrack } from "svelte";
+    import type { ChildrenChanges } from "../utils";
+    import { showDialog } from "../../../actions";
 
     const { lobb, ctx } = getStudioContext();
     import CreateDetailViewChildren from "./createDetailViewChildren.svelte";
@@ -38,6 +41,7 @@
         showRelatedRecords = true,
         onCancel,
         onSuccessfullSave,
+        onCreated,
         title,
         submitButton,
         onChanges,
@@ -46,6 +50,31 @@
     const isRecordingMode = onChanges !== undefined;
     let changes = $state<Changes>({ data: {}, children: {} });
 
+    const totalChangeCount = $derived.by(() => {
+        let count = Object.keys(changes.data).length;
+        for (const ch of Object.values(changes.children) as ChildrenChanges[]) {
+            count += ch.created.length + ch.updated.length + ch.deleted.length + ch.linked.length + ch.unlinked.length;
+        }
+        return count;
+    });
+
+    const hasChildChanges = $derived(
+        Object.values(changes.children).some((ch: ChildrenChanges) =>
+            ch.created.length || ch.linked.length
+        )
+    );
+
+    const changeSummaryLines = $derived.by(() => {
+        const lines: string[] = [];
+        const fieldCount = Object.keys(changes.data).length;
+        if (fieldCount > 0) lines.push(`${fieldCount} field${fieldCount > 1 ? 's' : ''} filled`);
+        for (const [col, ch] of Object.entries(changes.children) as [string, ChildrenChanges][]) {
+            if (ch.created.length) lines.push(`${ch.created.length} created in ${col}`);
+            if (ch.linked.length) lines.push(`${ch.linked.length} linked in ${col}`);
+        }
+        return lines;
+    });
+
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
     let fieldsErrors: Record<string, any> = $state({});
@@ -82,17 +111,27 @@
     }
 
     async function handleSave() {
+        if (!isRecordingMode && hasChildChanges && changeSummaryLines.length > 0) {
+            const confirmed = await showDialog(
+                "Confirm changes",
+                changeSummaryLines.map(l => `• ${l}`).join('\n')
+            );
+            if (!confirmed) return;
+        }
+
         const snap = $state.snapshot(changes);
         const response = await lobb.createOne(collectionName, buildPayload(snap), undefined, isRecordingMode);
 
         if (response.status === 204) {
             onChanges?.(snap);
             if (onSuccessfullSave) await onSuccessfullSave(snap);
+            await onCreated?.(snap.data);
             toast.success(`The record was successfully created`);
             handleCancel();
             return;
         }
 
+        let createdRecord: any = null;
         if (!response.bodyUsed) {
             const result = await response.json();
             if (response.status >= 400) {
@@ -104,10 +143,12 @@
                     return;
                 }
             }
+            createdRecord = result.data ?? result;
         }
 
         onChanges?.(snap);
         if (onSuccessfullSave) await onSuccessfullSave(snap);
+        await onCreated?.(createdRecord ?? snap.data);
         toast.success(`The record was successfully created`);
         onCancel?.();
     }
@@ -152,9 +193,10 @@
                 variant="default"
                 size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Plus}
+                aria-label={submitButton?.text ?? "Create record"}
                 onclick={handleSave}
             >
-                {submitButton?.text ? submitButton.text : "Create"}
+                {submitButton?.text ?? "Create"}{totalChangeCount > 0 ? ` (${totalChangeCount})` : ''}
             </Button>
         </div>
     </div>

package/src/lib/components/detailView/update/updateDetailView.svelte

@@ -27,6 +27,7 @@
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import { untrack } from "svelte";
+    import { showDialog } from "../../../actions";
 
     const { lobb, ctx } = getStudioContext();
     import { getChangedProperties } from "../../../utils";
@@ -69,6 +70,34 @@
         ),
     );
 
+    const totalChangeCount = $derived.by(() => {
+        let count = Object.keys(localChanges.data).length;
+        for (const ch of Object.values(localChanges.children) as ChildrenChanges[]) {
+            count += ch.created.length + ch.updated.length + ch.deleted.length + ch.linked.length + ch.unlinked.length;
+        }
+        return count;
+    });
+
+    const hasChildChanges = $derived(
+        Object.values(localChanges.children).some((ch: ChildrenChanges) =>
+            ch.created.length || ch.updated.length || ch.deleted.length || ch.linked.length || ch.unlinked.length
+        )
+    );
+
+    const changeSummaryLines = $derived.by(() => {
+        const lines: string[] = [];
+        const fieldCount = Object.keys(localChanges.data).length;
+        if (fieldCount > 0) lines.push(`${fieldCount} field${fieldCount > 1 ? 's' : ''} changed`);
+        for (const [col, ch] of Object.entries(localChanges.children) as [string, ChildrenChanges][]) {
+            if (ch.created.length) lines.push(`${ch.created.length} created in ${col}`);
+            if (ch.linked.length) lines.push(`${ch.linked.length} linked in ${col}`);
+            if (ch.updated.length) lines.push(`${ch.updated.length} edited in ${col}`);
+            if (ch.deleted.length) lines.push(`${ch.deleted.length} deleted from ${col}`);
+            if (ch.unlinked.length) lines.push(`${ch.unlinked.length} unlinked from ${col}`);
+        }
+        return lines;
+    });
+
     $effect(() => {
         const currentEntrySnap = $state.snapshot(values);
 
@@ -77,17 +106,6 @@
         });
     });
 
-    $effect(() => {
-        const snap = $state.snapshot(localChanges);
-        if (isRecordingMode) {
-            const hasAny = Object.keys(snap.data).length > 0 ||
-                Object.values(snap.children).some((c: ChildrenChanges) =>
-                    c.created.length || c.updated.length || c.deleted.length || c.linked.length || c.unlinked.length
-                );
-            if (hasAny) untrack(() => onChanges?.(snap));
-        }
-    });
-
     function buildPayload(changes: Changes): { data: Record<string, any>; children?: Record<string, any> } {
         const { id: _id, ...data } = changes.data;
         const children = buildChildren(changes.children);
@@ -119,6 +137,14 @@
     }
 
     async function handleSave() {
+        if (!isRecordingMode && hasChildChanges && changeSummaryLines.length > 0) {
+            const confirmed = await showDialog(
+                "Confirm changes",
+                changeSummaryLines.map(l => `• ${l}`).join('\n')
+            );
+            if (!confirmed) return;
+        }
+
         const snap = $state.snapshot(localChanges);
         const response = await lobb.updateOne(collectionName, recordId, buildPayload(snap), isRecordingMode);
 
@@ -189,10 +215,11 @@
                 variant="default"
                 size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
+                aria-label={submitButton?.text ?? "Update"}
                 onclick={handleSave}
                 disabled={!hasChanges}
             >
-                {submitButton?.text ? submitButton.text : "Update"}
+                {submitButton?.text ?? "Update"}{totalChangeCount > 0 ? ` (${totalChangeCount})` : ''}
             </Button>
         </div>
     </div>

package/src/lib/components/detailView/update/updateDetailViewButton.svelte

@@ -11,6 +11,7 @@
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
+		"aria-label"?: string;
 	}
 
 	let props: LocalProp = $props();
@@ -20,6 +21,11 @@
 	const { lobb } = getStudioContext();
 
 	async function openView() {
+		if (props.values) {
+			values = props.values;
+			open = true;
+			return;
+		}
 		const params = {
 			fields: "*",
 			filter: { id: props.recordId },
@@ -37,6 +43,7 @@
 	size={props.size}
 	class={props.class}
 	Icon={props.Icon}
+	aria-label={props["aria-label"]}
 	onclick={openView}
 >
 	{#if props.children}

package/src/lib/components/drawer.svelte

@@ -36,6 +36,7 @@
     ></button>
 
     <div
+        role="dialog"
         transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
         class={position === "bottom"
             ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-card"

package/src/lib/components/foreingKeyInput.svelte

@@ -3,9 +3,11 @@
     import Input from "./ui/input/input.svelte";
     import SelectRecord from "./selectRecord.svelte";
     import UpdateDetailViewButton from "./detailView/update/updateDetailViewButton.svelte";
+    import CreateDetailView from "./detailView/create/createDetailView.svelte";
     import { getCollectionPrimaryField } from "./dataTable/utils";
     import { getStudioContext } from "../context";
-    import { ExternalLink } from "lucide-svelte";
+    import { ExternalLink, Plus } from "lucide-svelte";
+    import Button from "./ui/button/button.svelte";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -28,6 +30,7 @@
     }: LocalProps = $props();
 
     let displayName = $state<string | null>(null);
+    let createDrawerOpen = $state(false);
 
     onMount(async () => {
         if (value == null) return;
@@ -51,6 +54,12 @@
         displayName = primaryFieldName ? String(selectedEntry[primaryFieldName]) : null;
     }
 
+    async function handleCreated(record: any) {
+        const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
+        value = record.id;
+        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+    }
+
     const idIsZero = $derived(value === 0);
 </script>
 
@@ -71,6 +80,14 @@
                     {displayName}
                 </div>
             {/if}
+            <Button
+                class="h-6 px-2 font-normal text-xs"
+                variant="outline"
+                Icon={Plus}
+                onclick={() => (createDrawerOpen = true)}
+            >
+                Create
+            </Button>
             <SelectRecord
                 class="h-6 px-2 font-normal text-xs"
                 variant="outline"
@@ -78,6 +95,7 @@
                 {collectionName}
                 {fieldName}
                 onSelect={handleSelect}
+                text="Select"
                 {entry}
             />
         </div>
@@ -103,3 +121,11 @@
         />
     </div>
 {/if}
+
+{#if createDrawerOpen}
+    <CreateDetailView
+        collectionName={collectionName}
+        onCreated={handleCreated}
+        onCancel={async () => { createDrawerOpen = false; }}
+    />
+{/if}

package/src/lib/components/polymorphicInput.svelte

@@ -6,7 +6,8 @@
     import * as Popover from "./ui/popover/index";
     import { getCollectionPrimaryField } from "./dataTable/utils";
     import { getStudioContext } from "../context";
-    import { ArrowLeft, Link, ChevronDown } from "lucide-svelte";
+    import { ArrowLeft, Link, ChevronDown, Plus } from "lucide-svelte";
+    import CreateDetailView from "./detailView/create/createDetailView.svelte";
 
     const { ctx, lobb } = getStudioContext();
 
@@ -32,6 +33,7 @@
     let displayName = $state<string | null>(null);
     let collectionPopoverOpen = $state(false);
     let recordDrawerOpen = $state(false);
+    let createDrawerOpen = $state(false);
 
     onMount(async () => {
         if (selectedCollection == null || selectedId == null) return;
@@ -68,6 +70,12 @@
         displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
         recordDrawerOpen = false;
     }
+
+    async function onPolyCreated(record: any) {
+        const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection!);
+        entry = { ...entry, [idField]: record.id };
+        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+    }
 </script>
 
 <div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted {destructive ? 'border-destructive bg-destructive/10' : ''}">
@@ -115,15 +123,23 @@
         </div>
     {/if}
 
-    <!-- Select record button -->
+    <!-- Create / Select record buttons -->
     {#if selectedCollection}
+        <Button
+            class="h-6 shrink-0 px-2 font-normal text-xs"
+            variant="outline"
+            onclick={() => (createDrawerOpen = true)}
+        >
+            <Plus size="13" />
+            Create
+        </Button>
         <Button
             class="h-6 shrink-0 px-2 font-normal text-xs"
             variant="outline"
             onclick={() => (recordDrawerOpen = true)}
         >
             <Link size="13" />
-            Select Record
+            Select
         </Button>
     {/if}
 </div>
@@ -155,3 +171,11 @@
         </div>
     </Drawer>
 {/if}
+
+{#if createDrawerOpen && selectedCollection}
+    <CreateDetailView
+        collectionName={selectedCollection}
+        onCreated={onPolyCreated}
+        onCancel={async () => { createDrawerOpen = false; }}
+    />
+{/if}