@lobb-js/studio 0.29.0 → 0.30.0

package/dist/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/dist/components/dataTableDrawer/dataTableDrawer.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { TableProps } from "../dataTable/table.svelte";
+import type { CollectionTab } from "../../store.types";
 interface Props {
     collectionName: string;
     filter?: Record<string, any>;
@@ -7,6 +8,7 @@ interface Props {
     showFooter?: boolean;
     tableProps?: Partial<TableProps>;
     position?: "side" | "bottom";
+    tabs?: CollectionTab[];
     onClose?: () => void;
 }
 declare const DataTableDrawer: import("svelte").Component<Props, {}, "">;

package/dist/components/dataTablePopup/dataTablePopup.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { fade, scale } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
+	import Portal from "svelte-portal";
+	import Button from "../ui/button/button.svelte";
+	import DataTable from "../dataTable/dataTable.svelte";
+	import type { TableProps } from "../dataTable/table.svelte";
+	import type { CollectionTab } from "../../store.types";
+
+	interface Props {
+		collectionName: string;
+		filter?: Record<string, any>;
+		title?: string;
+		showHeader?: boolean;
+		showFooter?: boolean;
+		tableProps?: Partial<TableProps>;
+		tabs?: CollectionTab[];
+		onClose?: () => void;
+	}
+
+	let {
+		collectionName,
+		filter,
+		title,
+		showHeader = true,
+		showFooter = true,
+		tableProps,
+		tabs,
+		onClose,
+	}: Props = $props();
+</script>
+
+<Portal target="body">
+	<button
+		transition:fade={{ duration: 200 }}
+		onclick={() => onClose?.()}
+		class="fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
+		aria-label="background used to close the popup"
+	></button>
+
+	<div
+		transition:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
+		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-2xl"
+	>
+		<div class="flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4">
+			<div class="text-sm font-medium">{title ?? collectionName}</div>
+			<Button
+				variant="ghost"
+				size="icon"
+				onclick={() => onClose?.()}
+				class="h-8 w-8 rounded-full text-muted-foreground"
+				Icon={X}
+			/>
+		</div>
+		<div class="min-h-0 flex-1 overflow-auto">
+			<DataTable
+				{collectionName}
+				{filter}
+				{showHeader}
+				{showFooter}
+				{tableProps}
+				{tabs}
+			/>
+		</div>
+	</div>
+</Portal>

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

@@ -0,0 +1,15 @@
+import type { TableProps } from "../dataTable/table.svelte";
+import type { CollectionTab } from "../../store.types";
+interface Props {
+    collectionName: string;
+    filter?: Record<string, any>;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    tableProps?: Partial<TableProps>;
+    tabs?: CollectionTab[];
+    onClose?: () => void;
+}
+declare const DataTablePopup: import("svelte").Component<Props, {}, "">;
+type DataTablePopup = ReturnType<typeof DataTablePopup>;
+export default DataTablePopup;

package/dist/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/dist/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/dist/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/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

@@ -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

@@ -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}
 />