@lobb-js/studio 0.29.0 → 0.29.1

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

@@ -24,8 +24,11 @@
     import type { Changes, ChildrenChanges } from "../detailView/utils";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import { emitEvent } from "../../eventSystem";
+    import { onMount } from "svelte";
     import Tabs from "./dataTableTabs.svelte";
     import { fade } from "svelte/transition";
+    import type { CollectionTab } from "../../store.types";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -38,9 +41,9 @@
         showHeader?: boolean;
         showFooter?: boolean;
         showImport?: boolean;
-        unifiedBgColor?: "bg-muted/30" | "bg-background";
         showDelete?: boolean;
         tableProps?: Partial<TableProps>;
+        tabs?: CollectionTab[];
         headerLeft?: Snippet<[]>;
     }
 
@@ -53,12 +56,26 @@
         showHeader = true,
         showFooter = true,
         showImport = true,
-        unifiedBgColor,
         showDelete = false,
         tableProps,
+        tabs,
         headerLeft,
     }: Props = $props();
 
+    // Gate row/header buttons by the current user's permissions:
+    // - showUpdate → per-row edit button
+    // - showCreate → header's Create + Import buttons (passed to Header)
+    let showUpdate = $state(false);
+    let showCreate = $state(false);
+    onMount(async () => {
+        const [update, create] = await Promise.all([
+            emitEvent({ lobb, ctx }, "auth.canAccess", { collection: collectionName, action: "update" }),
+            emitEvent({ lobb, ctx }, "auth.canAccess", { collection: collectionName, action: "create" }),
+        ]);
+        showUpdate = update === true;
+        showCreate = create === true;
+    });
+
     function getOrCreateUpdatedSlot(recordId: string): Changes | undefined {
         if (!changes) return undefined;
         let slot = changes.updated.find((u) => String(u.id) === String(recordId));
@@ -191,10 +208,7 @@
 
 <div
     bind:clientWidth={dataTableContainerWidth}
-    class="
-        flex flex-col overflow-auto h-full w-full
-        {unifiedBgColor ? unifiedBgColor : ''}
-    "
+    class="flex flex-col overflow-auto h-full w-full"
 >
     {#snippet rowActionsSnippet(entry: Record<string, any>)}
         <ExtensionsComponents
@@ -212,6 +226,7 @@
             {collectionName}
             bind:selectedRecords
             {showImport}
+            {showCreate}
             {parentContext}
             {changes}
         >
@@ -220,7 +235,7 @@
             {/snippet}
         </Header>
     {/if}
-    <Tabs {collectionName} {filter} bind:activeTabFilter />
+    <Tabs {collectionName} {filter} {tabs} bind:activeTabFilter />
     <div class="relative flex-1 overflow-auto w-full">
         {#key activeTabFilter}
             <div class="h-full w-full" in:fade={{ duration: 120 }}>
@@ -240,22 +255,23 @@
                         showLastColumnBorder={true}
                         bind:sort={params.sort}
                         bind:selectedRecords
-                        {unifiedBgColor}
                         bind:tableWidth={dataTableWidth}
                         {...tableProps}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                         {#snippet tools(entry)}
-                            <UpdateDetailViewButton
-                                {collectionName}
-                                recordId={entry.id}
-                                variant="ghost"
-                                class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                Icon={Pencil}
-                                changes={getOrCreateUpdatedSlot(String(entry.id))}
-                                onSuccessfullSave={async () => {
-                                    params = { ...params };
-                                }}
-                            ></UpdateDetailViewButton>
+                            {#if showUpdate}
+                                <UpdateDetailViewButton
+                                    {collectionName}
+                                    recordId={entry.id}
+                                    variant="ghost"
+                                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                    Icon={Pencil}
+                                    changes={getOrCreateUpdatedSlot(String(entry.id))}
+                                    onSuccessfullSave={async () => {
+                                        params = { ...params };
+                                    }}
+                                ></UpdateDetailViewButton>
+                            {/if}
                             {#if parentContext}
                                 <Button
                                     class="h-6 w-6 text-muted-foreground hover:bg-transparent"
@@ -293,7 +309,6 @@
                                 width={dataTableWidth > dataTableContainerWidth
                                     ? dataTableContainerWidth
                                     : dataTableWidth}
-                                unifiedBgColor={unifiedBgColor ?? "bg-background"}
                             />
                         {/snippet}
                     </Table>

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

@@ -1,17 +1,19 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
+    import type { CollectionTab } from "../../store.types";
 
     const { lobb, ctx } = getStudioContext();
 
     interface Props {
         collectionName: string;
         filter?: any;
+        tabs?: CollectionTab[];
         activeTabFilter?: any;
     }
 
-    let { collectionName, filter, activeTabFilter = $bindable() }: Props = $props();
+    let { collectionName, filter, tabs: tabsProp, activeTabFilter = $bindable() }: Props = $props();
 
-    const tabs = ctx.meta.collections[collectionName].ui?.tabs;
+    const tabs: CollectionTab[] | undefined = $derived(tabsProp ?? ctx.meta.collections[collectionName].ui?.tabs);
     let activeTab = $state<string | null>(null);
     let tabCounts = $state<Record<string, number>>({});
 

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

@@ -25,6 +25,7 @@
         parentContext?: ParentContext;
         changes?: ChildrenChanges;
         showImport?: boolean;
+        showCreate?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -35,6 +36,7 @@
         parentContext,
         changes,
         showImport = true,
+        showCreate = false,
         left
     }: Props = $props();
 
@@ -167,7 +169,7 @@
         >
             {headerIsSmall ? "" : "Refresh"}
         </Button>
-        {#if showImport}
+        {#if showImport && showCreate}
             <Tooltip.Provider delayDuration={0}>
                 <Tooltip.Root>
                     <Tooltip.Trigger>
@@ -200,15 +202,17 @@
                 {headerIsSmall ? "" : "Link"}
             </SelectRecord>
         {/if}
-        <CreateDetailViewButton
-            {collectionName}
-            variant="default"
-            class="h-7 px-3 text-xs font-normal"
-            Icon={Plus}
-            changes={changes ? createChanges : undefined}
-            onSuccessfullSave={handleCreateSuccess}
-        >
-            {headerIsSmall ? "" : "Create"}
-        </CreateDetailViewButton>
+        {#if showCreate}
+            <CreateDetailViewButton
+                {collectionName}
+                variant="default"
+                class="h-7 px-3 text-xs font-normal"
+                Icon={Plus}
+                changes={changes ? createChanges : undefined}
+                onSuccessfullSave={handleCreateSuccess}
+            >
+                {headerIsSmall ? "" : "Create"}
+            </CreateDetailViewButton>
+        {/if}
     </div>
 </div>

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

@@ -12,10 +12,9 @@
         collectionName: string;
         recordId: string;
         width: number;
-        unifiedBgColor?: "bg-muted/30" | "bg-background";
     }
 
-    let { collectionName, recordId, width, unifiedBgColor }: Props = $props();
+    let { collectionName, recordId, width }: Props = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
@@ -27,13 +26,13 @@
 
 <div class="flex" style="width: {width}px;">
     <div
-        class="flex justify-center border-r {unifiedBgColor ? unifiedBgColor : 'bg-background'}"
+        class="flex justify-center border-r bg-background"
         style="width: 40px"
     ></div>
     <div class="flex-1 flex flex-col">
         {#each children as child, index}
             {@const lastRow = children.length - 1 === index}
-            <div class="overflow-hidden {unifiedBgColor ? unifiedBgColor : 'bg-background'}">
+            <div class="overflow-hidden bg-background">
                 <div
                     bind:clientWidth={tableHeaderWidth}
                     class="flex justify-between items-center gap-2 text-sm h-10 {expandedRows[index] || !lastRow ? 'border-b' : ''}"
@@ -75,7 +74,7 @@
                 {#if expandedRows[index]}
                     <div class="flex max-h-96 overflow-auto {lastRow ? '' : 'border-b'}">
                         <div
-                            class="border-r {unifiedBgColor ? unifiedBgColor : ''}"
+                            class="border-r"
                             style="width: 100vw; max-width: 40px"
                         ></div>
                         <div class="flex-1" style="width: {tableHeaderWidth - 40}px;">
@@ -92,7 +91,6 @@
                                         showHeader={false}
                                         showFooter={false}
                                         showDelete={child.type === "fk"}
-                                        {unifiedBgColor}
                                         tableProps={{ showLastRowBorder: false, showLastColumnBorder: false, showCheckboxes: false }}
                                     />
                                 </ExtensionsComponents>

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

@@ -38,7 +38,6 @@
 
 		// other
 		parentWidth?: number;
-		unifiedBgColor?: "bg-muted/30" | "bg-background";
 		select?: Select;
 		tableWidth?: number;
 	}
@@ -77,7 +76,6 @@
 		tools,
 		rowActions,
 		collapsible,
-		unifiedBgColor,
 		select,
 		tableWidth = $bindable(),
 	}: TableProps = $props();
@@ -184,7 +182,7 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 			"
 		>
 			<!-- collapsable toggle -->
@@ -209,7 +207,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -236,7 +234,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -251,7 +249,7 @@
 					class="
 						sticky left-0
 						flex items-center p-2.5 text-xs h-10
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 						border-r gap-2
 					"
 				>
@@ -298,7 +296,7 @@
 					class="
 						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
 						{select ? 'cursor-pointer' : ''}
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 					"
 				>
@@ -315,7 +313,7 @@
 						sticky right-0 z-10
 						flex items-center p-2.5 text-xs h-10
 						border-l gap-2
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 					"
 				>
 					{@render rowActions?.(entry, index)}
@@ -336,8 +334,8 @@
 						{expandedRows[index] ? '' : 'height: 0px;'}
 					"
 					class="
-						sticky left-0 top-0 overflow-auto bg-muted/30
-						{unifiedBgColor ? unifiedBgColor : ''}
+						sticky left-0 top-0 overflow-auto bg-muted-soft
+						
 						{expandedRows[index] ? 'border-t' : ''}
 					"
 				>

package/src/lib/components/dataTableDrawer/dataTableDrawer.svelte

@@ -4,6 +4,7 @@
     import DataTable from "../dataTable/dataTable.svelte";
     import Drawer from "../drawer.svelte";
     import type { TableProps } from "../dataTable/table.svelte";
+    import type { CollectionTab } from "../../store.types";
 
     interface Props {
         collectionName: string;
@@ -13,6 +14,7 @@
         showFooter?: boolean;
         tableProps?: Partial<TableProps>;
         position?: "side" | "bottom";
+        tabs?: CollectionTab[];
         onClose?: () => void;
     }
 
@@ -24,6 +26,7 @@
         showFooter = true,
         tableProps,
         position = "side",
+        tabs,
         onClose,
     }: Props = $props();
 </script>
@@ -47,7 +50,7 @@
             {showHeader}
             {showFooter}
             {tableProps}
-            unifiedBgColor="bg-background"
+            {tabs}
         />
     </div>
 </Drawer>

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

@@ -37,7 +37,7 @@
                     parentCollectionName={collectionName}
                     collectionName={child.collection}
                     parentRecord={{ id: entry.id, collectionName }}
-                    class="bg-muted/30 border rounded-md overflow-hidden"
+                    class="bg-muted-soft border rounded-md overflow-hidden"
                     bind:value={entry[child.collection]}
                 >
                     <CreateManyView

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

@@ -24,53 +24,46 @@
     import { untrack } from "svelte";
 
     const { lobb, ctx } = getStudioContext();
-    import ExtensionsComponents from "../../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
-    import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "./children.svelte";
     import { buildChildren, getDefaultEntry } from "../utils";
     import type { Changes } from "../utils";
     import { getChangedProperties } from "../../../utils";
     import type { Snippet } from "svelte";
-    import FieldInput from "../fieldInput.svelte";
+    import DetailView from "../detailView.svelte";
     import Drawer from "../../drawer.svelte";
 
     let {
         collectionName,
-        values = {},
+        values: passedValues = {} as Record<string, any>,
         showRelatedRecords = true,
         onCancel,
         onSuccessfullSave,
         title,
         submitButton,
-        changes = $bindable<Changes | undefined>(undefined),
+        changes: passedChanges = $bindable<Changes | undefined>(undefined),
     }: CreateDetailViewProp = $props();
 
-    let _changes = $state<Changes>({ data: {}, children: {} });
-    const isRecordingMode = $derived(changes !== undefined);
+    const isRecordingMode = passedChanges !== undefined;
+    if (!isRecordingMode) passedChanges = { data: {}, children: {} };
+    const changes = passedChanges as Changes;
 
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
-    let entry: Record<string, any> = $state(
-        getDefaultEntry(ctx, fieldNames, collectionName, values),
-    );
-    const initialEntry = $state.snapshot(entry);
+    let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
     let fieldsErrors: Record<string, any> = $state({});
 
     const childCollections = ctx.meta.relations
         .filter((r) => r.to.collection === collectionName)
         .map((r) => (r as any).from.collection);
 
-    const subCollections = childCollections;
     const subCollectionsValues: Record<string, any> = {};
-    for (const col of subCollections) {
-        if (values[col]) subCollectionsValues[col] = values[col];
+    for (const col of childCollections) {
+        if (passedValues[col]) subCollectionsValues[col] = passedValues[col];
     }
 
     $effect(() => {
-        const snap = $state.snapshot(entry);
+        const snap = $state.snapshot(values);
 
         untrack(() => {
-            const target = changes ?? _changes;
             const data: Record<string, any> = {};
             const children: Record<string, any> = {};
 
@@ -88,17 +81,17 @@
                 }
             }
 
-            target.data = data;
-            target.children = children;
+            changes.data = data;
+            changes.children = children;
 
             if (!isRecordingMode) {
-                console.log(`[${collectionName}] changes:`, $state.snapshot(target));
+                console.log(`[${collectionName}] changes:`, $state.snapshot(changes));
             }
         });
     });
 
     function handleCancel() {
-        if (changes !== undefined) {
+        if (isRecordingMode) {
             changes.data = {};
             changes.children = {};
         }
@@ -106,14 +99,13 @@
     }
 
     async function handleSave() {
-        const target = changes ?? _changes;
-        const snap = $state.snapshot(target);
+        const snap = $state.snapshot(changes);
 
         const children = buildChildren(ctx, collectionName, { ...snap.data, ...Object.fromEntries(
             Object.entries(snap.children).map(([col, ops]) => [
                 col,
                 [
-                    ...(ops.created.map((c) => c.data)),
+                    ...(ops.created.map((op) => op.data)),
                     ...(ops.linked.map((id) => ({ id }))),
                 ]
             ])
@@ -135,6 +127,7 @@
                     fieldsErrors = result.details;
                     return;
                 } else if (result.message) {
+                    toast.error(result.message);
                     return;
                 }
             }
@@ -166,44 +159,9 @@
         </div>
     </div>
     <div class="flex-1 overflow-y-auto">
-        <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)}
-                    <div class="flex flex-col gap-2">
-                        <div class="flex flex-1 items-end justify-between gap-2 text-xs">
-                            <div class="flex gap-2">
-                                <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>
-                            <div>
-                                <ExtensionsComponents
-                                    name="dvFields.topRight.{collectionName}.{fieldName}"
-                                    utils={getExtensionUtils(lobb, ctx)}
-                                    bind:value={entry[fieldName]}
-                                />
-                            </div>
-                        </div>
-                        <FieldInput
-                            {collectionName}
-                            {fieldName}
-                            bind:value={
-                                () => entry[fieldName],
-                                (v) => (entry = { ...entry, [fieldName]: v })
-                            }
-                            bind:entry
-                            errorMessages={fieldsErrors[fieldName]}
-                        />
-                    </div>
-                {/if}
-            {/each}
-        </div>
+        <DetailView {collectionName} bind:entry={values} {fieldsErrors} />
         {#if showRelatedRecords}
-            <Children {collectionName} values={subCollectionsValues} bind:entry />
+            <Children {collectionName} values={subCollectionsValues} bind:entry={values} />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">

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

@@ -112,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' : ''}
         "
     >
@@ -165,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
@@ -240,7 +239,6 @@
                             {collectionName}
                             recordId={entry.id}
                             width={tableWidth}
-                            unifiedBgColor="bg-muted/30"
                         />
                     {:else}
                         <SubRecords

package/src/lib/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>