@lobb-js/studio 0.28.6 → 0.29.1

package/dist/components/detailView/create/createDetailView.svelte.d.ts

@@ -6,13 +6,13 @@ export interface CreateDetailViewProp {
     collectionName: string;
     values?: Record<string, any>;
     showRelatedRecords?: boolean;
-    rollback?: boolean;
     submitButton?: SubmitButton;
     title?: Snippet<[string]>;
     onSuccessfullSave?: (entry: any) => Promise<void>;
     onCancel?: () => Promise<void>;
+    changes?: import("../utils").Changes | undefined;
 }
 import type { Snippet } from "svelte";
-declare const CreateDetailView: import("svelte").Component<CreateDetailViewProp, {}, "">;
+declare const CreateDetailView: import("svelte").Component<CreateDetailViewProp, {}, "changes">;
 type CreateDetailView = ReturnType<typeof CreateDetailView>;
 export default CreateDetailView;

package/dist/components/detailView/create/createDetailViewButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { CreateDetailViewProp } from "./createDetailView.svelte";
-	import type { ButtonProps } from "../../../components/ui/button/button.svelte";
-	import Button from "../../../components/ui/button/button.svelte";
+	import type { ButtonProps } from "../../ui/button/button.svelte";
+	import Button from "../../ui/button/button.svelte";
 	import CreateDetailView from "./createDetailView.svelte";
 
 	interface LocalProp extends CreateDetailViewProp {

package/dist/components/detailView/create/createDetailViewButton.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { CreateDetailViewProp } from "./createDetailView.svelte";
-import type { ButtonProps } from "../../../components/ui/button/button.svelte";
+import type { ButtonProps } from "../../ui/button/button.svelte";
 interface LocalProp extends CreateDetailViewProp {
     variant?: ButtonProps["variant"];
     class?: ButtonProps["class"];

package/dist/components/detailView/create/createManyView.svelte

@@ -11,11 +11,15 @@
     import Table, { type TableProps } from "../../dataTable/table.svelte";
     import Button from "../../ui/button/button.svelte";
     import CreateDetailViewButton from "./createDetailViewButton.svelte";
-    import { getCollectionColumns } from "../../../components/dataTable/utils";
-    import SelectRecord from "../../../components/selectRecord.svelte";
-    import FieldCell from "../../../components/dataTable/fieldCell.svelte";
+    import type { Changes } from "../utils";
+
+    let addChanges = $state<Changes>({ data: {}, children: {} });
+    let editChanges = $state<Changes>({ data: {}, children: {} });
+    import { getCollectionColumns } from "../../dataTable/utils";
+    import SelectRecord from "../../selectRecord.svelte";
+    import FieldCell from "../../dataTable/fieldCell.svelte";
     import SubRecords from "./subRecords.svelte";
-    import ListViewChildren from "../../../components/dataTable/listViewChildren.svelte";
+    import ListViewChildren from "../../dataTable/listViewChildren.svelte";
     import { getStudioContext } from "../../../context";
 
     const { ctx } = getStudioContext();
@@ -108,7 +112,7 @@
 >
     <div
         class="
-            flex items-center justify-between px-2 h-10 bg-muted/30
+            flex items-center justify-between px-2 h-10 bg-muted-soft
             {expanded ? 'border-b' : ''}
         "
     >
@@ -141,7 +145,7 @@
                 class="h-7 px-2 font-normal text-xs"
                 Icon={Plus}
                 {collectionName}
-                rollback={true}
+                changes={addChanges}
                 showRelatedRecords={true}
                 onSuccessfullSave={onRecordAdd}
                 values={createValues}
@@ -161,13 +165,12 @@
         </div>
     </div>
     {#if expanded}
-        <div bind:clientWidth={tableWidth} class="bg-muted/30 overflow-auto">
+        <div bind:clientWidth={tableWidth} class="bg-muted-soft overflow-auto">
             <Table
                 data={entries}
                 {columns}
                 selectByColumn="id"
                 showCollapsible={doesCollectionHasChildren}
-                unifiedBgColor="bg-muted/30"
             >
                 {#snippet tools(entry, index)}
                     <Button
@@ -197,7 +200,7 @@
                             class="h-6 w-6 text-muted-foreground hover:bg-transparent p-0"
                             Icon={Pencil}
                             {collectionName}
-                            rollback={true}
+                            changes={editChanges}
                             showRelatedRecords={true}
                             onSuccessfullSave={(entry) =>
                                 onRecordOverride(entry, index)}
@@ -236,7 +239,6 @@
                             {collectionName}
                             recordId={entry.id}
                             width={tableWidth}
-                            unifiedBgColor="bg-muted/30"
                         />
                     {:else}
                         <SubRecords

package/dist/components/detailView/detailView.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { CircleHelp } from "lucide-svelte";
+    import * as Tooltip from "../ui/tooltip";
+    import { getStudioContext } from "../../context";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import { getField, getFieldIcon } from "../dataTable/utils";
+    import FieldInput from "./fieldInput.svelte";
+
+    interface Props {
+        collectionName: string;
+        entry: Record<string, any>;
+        fieldsErrors?: Record<string, string[]>;
+    }
+
+    let {
+        collectionName,
+        entry = $bindable(),
+        fieldsErrors = {},
+    }: Props = $props();
+
+    const { lobb, ctx } = getStudioContext();
+    const fieldNames = $derived(
+        Object.keys(ctx.meta.collections[collectionName].fields),
+    );
+</script>
+
+<div class="flex flex-col gap-4 p-4">
+    {#each fieldNames as fieldName}
+        {#if !ctx.meta.collections[collectionName].fields[fieldName]?.ui?.hidden}
+            {@const field = getField(ctx, fieldName, collectionName)}
+            {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
+            {@const description = ctx.meta.collections[collectionName].fields[fieldName]?.description}
+            <div class="flex flex-col gap-2">
+                <div class="flex flex-1 items-end justify-between gap-2 text-xs">
+                    <div class="flex items-center gap-1.5">
+                        <ExtensionsComponents
+                            name="detailView.field.label"
+                            utils={getExtensionUtils(lobb, ctx)}
+                            {collectionName}
+                            {fieldName}
+                            bind:value={entry[fieldName]}
+                        >
+                            <div class="flex items-center gap-1.5">
+                                <div class="h-fit">{field.label}</div>
+                                <div class="flex h-fit items-center gap-1 text-[0.7rem] text-muted-foreground">
+                                    <FieldIcon size="12" />
+                                    {field.type}
+                                </div>
+                            </div>
+                        </ExtensionsComponents>
+                        {#if description}
+                            <Tooltip.Root>
+                                <Tooltip.Trigger>
+                                    <CircleHelp size="12" class="text-muted-foreground" />
+                                </Tooltip.Trigger>
+                                <Tooltip.Content class="max-w-64 text-xs">
+                                    {description}
+                                </Tooltip.Content>
+                            </Tooltip.Root>
+                        {/if}
+                    </div>
+                    <div>
+                        <ExtensionsComponents
+                            name="dvFields.topRight.{collectionName}.{fieldName}"
+                            utils={getExtensionUtils(lobb, ctx)}
+                            bind:value={entry[fieldName]}
+                        />
+                    </div>
+                </div>
+                <FieldInput
+                    {collectionName}
+                    {fieldName}
+                    bind:value={entry[fieldName]}
+                    bind:entry
+                    errorMessages={fieldsErrors[fieldName]}
+                />
+            </div>
+        {/if}
+    {/each}
+</div>

package/dist/components/detailView/detailView.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    collectionName: string;
+    entry: Record<string, any>;
+    fieldsErrors?: Record<string, string[]>;
+}
+declare const DetailView: import("svelte").Component<Props, {}, "entry">;
+type DetailView = ReturnType<typeof DetailView>;
+export default DetailView;

package/dist/components/detailView/fieldInput.svelte

@@ -6,7 +6,7 @@
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../../components/ui/select/index";
+	import * as Select from "../ui/select/index";
 	import EnumBadge from "../dataTable/enumBadge.svelte";
 	import type { EnumOption } from "@lobb-js/core";
 	import Textarea from "../ui/textarea/textarea.svelte";
@@ -86,7 +86,7 @@
 		{:else if field.label === "id"}
 			<Input
 				placeholder="AUTO GENERATED"
-				class="bg-muted/30 text-xs"
+				class="bg-muted-soft text-xs"
 				bind:value
 			/>
 		{:else if fieldRelationTarget && entry}
@@ -126,7 +126,7 @@
 			>
 				<Select.Trigger
 					class="
-						h-9 w-full bg-muted/30 pr-8
+						h-9 w-full bg-muted-soft pr-8
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
@@ -158,7 +158,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-muted/30 text-xs
+					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -168,7 +168,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
 				rows={5}
 				class="
-					bg-muted/30 text-xs
+					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -178,7 +178,7 @@
 				type="date"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				class="
-					dateInput block w-full bg-muted/30 pr-9 text-xs
+					dateInput block w-full bg-muted-soft pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -197,7 +197,7 @@
 				type="time"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				class="
-					dateInput block w-full bg-muted/30 pr-9 text-xs
+					dateInput block w-full bg-muted-soft pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -215,7 +215,7 @@
 				type="datetime-local"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				class="
-					dateInput block w-full bg-muted/30 pr-9 text-xs
+					dateInput block w-full bg-muted-soft pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -236,7 +236,7 @@
 				<Select.Trigger
 					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 					class="
-						bg-muted/30 pr-9
+						bg-muted-soft pr-9
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
@@ -263,7 +263,7 @@
 				type="number"
 				step="any"
 				class="
-					bg-muted/30 text-xs
+					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -273,7 +273,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				type="number"
 				class="
-					bg-muted/30 text-xs
+					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value

package/dist/components/detailView/fieldInputReplacement.svelte

@@ -2,7 +2,7 @@
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../../components/ui/select/index";
+	import * as Select from "../ui/select/index";
 	import Textarea from "../ui/textarea/textarea.svelte";
   	import type { EntryField } from "./detailViewForm.svelte";
   	import type { Snippet } from "svelte";
@@ -49,7 +49,7 @@
 				placeholder={field.placeholder ? field.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-muted/30 text-xs
+					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -64,7 +64,7 @@
 				<Select.Trigger
 					placeholder={field.placeholder ? field.placeholder : "NULL"}
 					class="
-						h-9 w-full bg-muted/30 pr-8
+						h-9 w-full bg-muted-soft pr-8
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
@@ -84,7 +84,7 @@
 					placeholder={field.placeholder ? field.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
 					rows={5}
 					class="
-						bg-muted/30 text-xs
+						bg-muted-soft text-xs
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 					bind:value
@@ -98,7 +98,7 @@
 			<Input
 				type="date"
 				class="
-					dateInput block w-full bg-muted/30 pr-9 text-xs
+					dateInput block w-full bg-muted-soft pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -116,7 +116,7 @@
 			<Input
 				type="time"
 				class="
-					dateInput block w-full bg-muted/30 pr-9 text-xs
+					dateInput block w-full bg-muted-soft pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -133,7 +133,7 @@
 			<Input
 				type="datetime-local"
 				class="
-					dateInput block w-full bg-muted/30 pr-9 text-xs
+					dateInput block w-full bg-muted-soft pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -154,7 +154,7 @@
 				<Select.Root type="single" bind:value>
 					<Select.Trigger
 						class="
-							bg-muted/30 pr-9
+							bg-muted-soft pr-9
 							{destructive ? 'border-destructive bg-destructive/10' : ''}
 						"
 					>

package/dist/components/detailView/passwordInput.svelte

@@ -21,7 +21,7 @@
 <Input
     type="password"
     placeholder="••••••"
-    class="bg-muted/30 text-xs {destructive ? 'border-destructive bg-destructive/10' : ''}"
+    class="bg-muted-soft text-xs {destructive ? 'border-destructive bg-destructive/10' : ''}"
     value={displayValue}
     oninput={onInput}
 />

package/dist/components/detailView/update/detailViewChildren.svelte

@@ -1,43 +1,32 @@
 <script lang="ts">
-    import DataTable, { type RecordOperation } from "../../../components/dataTable/dataTable.svelte";
+    import DataTable from "../../dataTable/dataTable.svelte";
     import { getStudioContext } from "../../../context";
     import { Table, Link } from "lucide-svelte";
 
     const { ctx } = getStudioContext();
 
-    type PendingOps = {
-        link?: (string | number)[];
-        unlink?: (string | number)[];
-        delete?: (string | number)[];
-        create?: any[];
-    };
+    import type { Changes, ChildrenChanges } from "../utils";
 
     interface LocalProp {
         collectionName: string;
         entry: any;
-        pendingChildren?: Record<string, PendingOps>;
+        activeChanges?: Changes;
     }
 
-    let { collectionName, entry, pendingChildren = $bindable({}) }: LocalProp = $props();
-
-    function makeHandler(collection: string) {
-        return (op: RecordOperation) => {
-            if (!pendingChildren[collection]) pendingChildren[collection] = {};
-            const c = pendingChildren[collection];
-            if (op.type === "link") {
-                (c.link ??= []).push(op.record.id);
-            } else if (op.type === "unlink") {
-                (c.unlink ??= []).push(op.id);
-            } else if (op.type === "delete") {
-                (c.delete ??= []).push(op.id);
-            } else if (op.type === "create") {
-                (c.create ??= []).push(op.record);
-            }
-        };
-    }
+    let { collectionName, entry, activeChanges }: LocalProp = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    // Ensure all child collection slots exist before the template renders so bind:changes works
+    $effect.pre(() => {
+        if (!activeChanges) return;
+        for (const child of children) {
+            if (!activeChanges.children[child.collection]) {
+                activeChanges.children[child.collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+            }
+        }
+    });
 </script>
 
 {#if children.length}
@@ -52,7 +41,7 @@
                     collectionName={child.collection}
                     searchParams={{ children_of: collectionName, parent_id: entry.id }}
                     parentContext={{ collectionName, recordId: entry.id }}
-                    onOperation={makeHandler(child.collection)}
+                    bind:changes={activeChanges!.children[child.collection]}
                     showImport={false}
                     showHeader={true}
                     showFooter={true}

package/dist/components/detailView/update/detailViewChildren.svelte.d.ts

@@ -1,14 +1,9 @@
-type PendingOps = {
-    link?: (string | number)[];
-    unlink?: (string | number)[];
-    delete?: (string | number)[];
-    create?: any[];
-};
+import type { Changes } from "../utils";
 interface LocalProp {
     collectionName: string;
     entry: any;
-    pendingChildren?: Record<string, PendingOps>;
+    activeChanges?: Changes;
 }
-declare const DetailViewChildren: import("svelte").Component<LocalProp, {}, "pendingChildren">;
+declare const DetailViewChildren: import("svelte").Component<LocalProp, {}, "">;
 type DetailViewChildren = ReturnType<typeof DetailViewChildren>;
 export default DetailViewChildren;