@lobb-js/studio 0.47.0 → 0.49.0

package/src/lib/components/detailView/fields/EmbeddedField.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { onMount, untrack } from "svelte";
+    import { Ban, Plus, Table, icons } from "lucide-svelte";
+    import Button from "../../ui/button/button.svelte";
+    import { getStudioContext } from "../../../context";
+    import DetailView from "../detailView.svelte";
+    import { getDefaultEntry } from "../utils";
+    import { getChangedProperties } from "../../../utils";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        fieldName: string;
+        value?: any;
+        entry: Record<string, any>;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        onClear?: () => void;
+    }
+
+    let {
+        collectionName,
+        fieldName,
+        value = $bindable(),
+        entry = $bindable(),
+        isDisabled = false,
+        errorMessages = [],
+        header,
+        onClear,
+    }: Props = $props();
+
+    const destructive = $derived(Array.isArray(errorMessages) && errorMessages.length > 0);
+
+    const CollectionIcon = $derived.by(() => {
+        const name = ctx.meta.collections[collectionName]?.ui?.icon;
+        return name && name in icons ? (icons as any)[name] : Table;
+    });
+
+    const fieldNames = Object.keys(ctx.meta.collections[collectionName]?.fields ?? {});
+    let embeddedValues = $state(getDefaultEntry(ctx, fieldNames, collectionName, {}));
+    let initialValues = $state<Record<string, any> | null>(null);
+    let loaded = $state(false);
+    let creating = $state(false);
+
+    const hasValue = $derived(value != null);
+    const hasNestedErrors = $derived(
+        errorMessages && typeof errorMessages === 'object' && !Array.isArray(errorMessages) &&
+        errorMessages.details && Object.keys(errorMessages.details).length > 0
+    );
+    const showForm = $derived(hasValue || creating || hasNestedErrors);
+
+    onMount(async () => {
+        const fkId = typeof value === 'number' ? value : null;
+        if (fkId != null) {
+            try {
+                const res = await lobb.findAll(collectionName, { filter: { id: fkId }, limit: 1 });
+                const result = await res.json();
+                const record = result.data[0] ?? {};
+                embeddedValues = getDefaultEntry(ctx, fieldNames, collectionName, record);
+                initialValues = { ...embeddedValues };
+            } catch { /* leave defaults */ }
+        } else if (value && typeof value === 'object' && value.create) {
+            embeddedValues = getDefaultEntry(ctx, fieldNames, collectionName, value.create);
+            creating = true;
+        }
+        loaded = true;
+    });
+
+    $effect(() => {
+        if (!loaded) return;
+        const snap = { ...embeddedValues };
+        const isCreating = creating; // track so the effect re-runs when user clicks Create
+        untrack(() => {
+            const fkId = typeof value === 'number' ? value : (value?.id ?? null);
+            if (fkId != null && initialValues) {
+                const changed = getChangedProperties(initialValues, snap);
+                value = Object.keys(changed).length > 0 ? { id: fkId, update: changed } : fkId;
+            } else if (isCreating) {
+                const data: Record<string, any> = {};
+                for (const [k, v] of Object.entries(snap)) {
+                    if (v !== null && v !== undefined && v !== '') data[k] = v;
+                }
+                value = { create: data };
+            }
+        });
+    });
+
+    function handleRemove() {
+        creating = false;
+        embeddedValues = getDefaultEntry(ctx, fieldNames, collectionName, {});
+        initialValues = null;
+        onClear?.();
+    }
+</script>
+
+<FieldWrapper span={2} {isDisabled} {errorMessages}>
+    {#snippet children()}
+        <div class="rounded-md border bg-muted/30 flex flex-col {destructive ? 'border-destructive' : ''}">
+            {#if showForm}
+                <div class="flex items-center justify-between gap-2 px-4 py-2.5 border-b">
+                    {#if header}
+                        <div class="flex items-center gap-2">
+                            <CollectionIcon size={14} class="text-muted-foreground" />
+                            <span class="text-sm font-medium">{header.text}</span>
+                            <span class="text-[0.7rem] text-muted-foreground">{collectionName}</span>
+                        </div>
+                    {/if}
+                    {#if !isDisabled}
+                        <Button onclick={handleRemove} variant="outline" class="aspect-square h-6 w-6 shrink-0 p-0" Icon={Ban} tabindex={-1} />
+                    {/if}
+                </div>
+                {#if loaded}
+                    <DetailView {collectionName} bind:entry={embeddedValues} fieldsErrors={errorMessages?.details ?? {}} />
+                {/if}
+            {:else}
+                <div class="flex flex-col items-center gap-3 py-8 px-4 text-center">
+                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+                        <CollectionIcon size={20} class="text-muted-foreground" />
+                    </div>
+                    <div class="flex flex-col items-center gap-2">
+                        <div class="flex items-center gap-2">
+                            <span class="text-sm font-semibold">No record attached in</span>
+                            <span class="rounded-md border bg-background px-2.5 py-0.5 text-xs font-semibold tracking-wide">{header?.text ?? collectionName}</span>
+                        </div>
+                        <span class="text-xs text-muted-foreground">Create a new record to attach it here.</span>
+                    </div>
+                    {#if !isDisabled}
+                        <Button onclick={() => creating = true} class="mt-1 gap-1.5" Icon={Plus}>
+                            Create
+                        </Button>
+                    {/if}
+                </div>
+            {/if}
+        </div>
+    {/snippet}
+</FieldWrapper>

package/src/lib/components/detailView/fields/EmbeddedPolymorphicField.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+    import { onMount, untrack } from "svelte";
+    import { Ban, ChevronDown, GitFork, Plus, Table, icons } from "lucide-svelte";
+    import Button from "../../ui/button/button.svelte";
+    import * as Popover from "../../ui/popover/index";
+    import { getStudioContext } from "../../../context";
+    import DetailView from "../detailView.svelte";
+    import { getDefaultEntry } from "../utils";
+    import { getChangedProperties } from "../../../utils";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        virtualField: string;
+        collectionField: string;
+        idField: string;
+        targetCollections: string[];
+        entry: Record<string, any>;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+    }
+
+    let {
+        virtualField,
+        collectionField,
+        idField,
+        targetCollections,
+        entry = $bindable(),
+        isDisabled = false,
+        errorMessages = [],
+        header,
+    }: Props = $props();
+
+    const selectedCollection = $derived(
+        (entry[virtualField]?.collection ?? entry[collectionField]) as string | null ?? null
+    );
+
+    const CollectionIcon = $derived.by(() => {
+        if (!selectedCollection) return GitFork;
+        const name = ctx.meta.collections[selectedCollection]?.ui?.icon;
+        return name && name in icons ? (icons as any)[name] : Table;
+    });
+
+    const destructive = $derived(Array.isArray(errorMessages) && errorMessages.length > 0);
+    const hasNestedErrors = $derived(
+        errorMessages && typeof errorMessages === 'object' && !Array.isArray(errorMessages) &&
+        errorMessages.details && Object.keys(errorMessages.details).length > 0
+    );
+
+    const showForm = $derived(!!selectedCollection || hasNestedErrors);
+
+    // --- embedded form state ---
+    let embeddedValues = $state<Record<string, any>>({});
+    let initialValues = $state<Record<string, any> | null>(null);
+    let loaded = $state(false);
+
+    async function loadEmbedded(col: string) {
+        loaded = false;
+        const fieldNames = Object.keys(ctx.meta.collections[col]?.fields ?? {});
+        const fkId = typeof entry[idField] === 'number' ? entry[idField] : null;
+        const virtualVal = entry[virtualField];
+
+        if (fkId != null) {
+            try {
+                const res = await lobb.findAll(col, { filter: { id: fkId }, limit: 1 });
+                const result = await res.json();
+                const record = result.data[0] ?? {};
+                embeddedValues = getDefaultEntry(ctx, fieldNames, col, record);
+                initialValues = { ...embeddedValues };
+            } catch { /* leave defaults */ }
+        } else if (virtualVal?.create && typeof virtualVal.create === 'object') {
+            embeddedValues = getDefaultEntry(ctx, fieldNames, col, virtualVal.create);
+        } else {
+            embeddedValues = getDefaultEntry(ctx, fieldNames, col, {});
+        }
+        loaded = true;
+    }
+
+    onMount(() => {
+        if (selectedCollection) loadEmbedded(selectedCollection);
+        else loaded = true;
+    });
+
+    $effect(() => {
+        if (!loaded || !selectedCollection) return;
+        const col = selectedCollection;
+        const snap = { ...embeddedValues };
+        untrack(() => {
+            const fkId = typeof entry[idField] === 'number' ? entry[idField] : null;
+            if (fkId != null && initialValues) {
+                const changed = getChangedProperties(initialValues, snap);
+                entry[virtualField] = Object.keys(changed).length > 0
+                    ? { collection: col, id: fkId, update: changed }
+                    : null;
+            } else {
+                const data: Record<string, any> = {};
+                for (const [k, v] of Object.entries(snap)) {
+                    if (v !== null && v !== undefined && v !== '') data[k] = v;
+                }
+                entry[virtualField] = { collection: col, create: data };
+            }
+        });
+    });
+
+    function handleSelect(name: string) {
+        entry[virtualField] = { collection: name };
+        embeddedValues = {};
+        initialValues = null;
+        loadEmbedded(name);
+    }
+
+    function handleClear() {
+        entry[virtualField] = null;
+        embeddedValues = {};
+        initialValues = null;
+        loaded = true;
+    }
+
+    function getCollectionIcon(name: string) {
+        const iconName = ctx.meta.collections[name]?.ui?.icon;
+        return iconName && iconName in icons ? (icons as any)[iconName] : Table;
+    }
+</script>
+
+<FieldWrapper span={2} {isDisabled} {errorMessages}>
+    {#snippet children()}
+        <div class="rounded-md border bg-muted/30 flex flex-col {destructive ? 'border-destructive' : ''}">
+            {#if showForm}
+                <div class="flex items-center justify-between gap-2 px-4 py-2.5 border-b">
+                    <div class="flex items-center gap-2">
+                        <CollectionIcon size={14} class="text-muted-foreground" />
+                        <span class="text-sm font-medium">{header?.text ?? ''}</span>
+                        {#if selectedCollection}
+                            <span class="text-[0.7rem] text-muted-foreground">{selectedCollection}</span>
+                        {/if}
+                    </div>
+                    {#if !isDisabled}
+                        <Button onclick={handleClear} variant="outline" class="aspect-square h-6 w-6 shrink-0 p-0" Icon={Ban} tabindex={-1} />
+                    {/if}
+                </div>
+                {#if selectedCollection && loaded}
+                    <DetailView
+                        collectionName={selectedCollection}
+                        bind:entry={embeddedValues}
+                        fieldsErrors={errorMessages?.details ?? {}}
+                    />
+                {/if}
+            {:else}
+                <div class="flex flex-col items-center gap-3 py-8 px-4 text-center">
+                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+                        <GitFork size={20} class="text-muted-foreground" />
+                    </div>
+                    <div class="flex flex-col items-center gap-2">
+                        <div class="flex items-center gap-2">
+                            <span class="text-sm font-semibold">No record attached in</span>
+                            <span class="rounded-md border bg-background px-2.5 py-0.5 text-xs font-semibold tracking-wide">{header?.text ?? 'content'}</span>
+                        </div>
+                        <span class="text-xs text-muted-foreground">Create a new record to link it here.</span>
+                    </div>
+                    {#if !isDisabled}
+                        <Popover.Root>
+                            <Popover.Trigger>
+                                {#snippet child({ props })}
+                                    <button
+                                        {...props}
+                                        class="mt-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+                                    >
+                                        <Plus size={14} />
+                                        Create
+                                        <ChevronDown size={12} class="opacity-70" />
+                                    </button>
+                                {/snippet}
+                            </Popover.Trigger>
+                            <Popover.Content class="w-48 p-2">
+                                <div class="flex flex-col gap-1">
+                                    {#each targetCollections as name}
+                                        {@const Icon = getCollectionIcon(name)}
+                                        <Button
+                                            variant="ghost"
+                                            class="justify-start text-xs font-normal h-7 px-2 gap-2"
+                                            onclick={() => handleSelect(name)}
+                                        >
+                                            <Icon size={12} />
+                                            {name}
+                                        </Button>
+                                    {/each}
+                                </div>
+                            </Popover.Content>
+                        </Popover.Root>
+                    {/if}
+                </div>
+            {/if}
+        </div>
+    {/snippet}
+</FieldWrapper>

package/src/lib/components/detailView/fields/EnumField.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { EnumOption } from "@lobb-js/core";
+    import * as Select from "../../ui/select/index";
+    import EnumBadge from "../../dataTable/enumBadge.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        rawEnum: (string | number | EnumOption)[];
+        isNumeric?: boolean;
+        placeholder?: string;
+        destructive?: boolean;
+        changedClass?: string;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+    let { value = $bindable(), rawEnum, isNumeric = false, placeholder = "NULL", destructive = false, changedClass = '', isDisabled = false, errorMessages = [], header, clearBtn }: Props = $props();
+
+    const isEnumOption = rawEnum.length > 0 && typeof rawEnum[0] === "object";
+    const enumOptions = isEnumOption ? rawEnum as EnumOption[] : undefined;
+</script>
+
+<FieldWrapper span={1} {isDisabled} {errorMessages} {header}>
+    {#snippet children()}
+        <div class="relative">
+            {#if clearBtn}
+                <div class="absolute right-1 inset-y-0 z-10 flex items-center">
+                    {@render clearBtn()}
+                </div>
+            {/if}
+            <Select.Root
+                type="single"
+                bind:value={
+                    () => value != null ? String(value) : undefined,
+                    (v) => {
+                        if (v == null) { value = null; return; }
+                        value = isNumeric ? Number(v) : v;
+                    }
+                }
+            >
+                <Select.Trigger class="h-9 w-full bg-muted pr-8 {changedClass} {destructive ? 'border-destructive' : ''}">
+                    {#if value != null && enumOptions}
+                        <EnumBadge value={String(value)} enum={enumOptions} />
+                    {:else if value != null}
+                        {value}
+                    {:else}
+                        <span class="text-muted-foreground">{placeholder}</span>
+                    {/if}
+                </Select.Trigger>
+                <Select.Content>
+                    <Select.Group>
+                        {#each rawEnum as option}
+                            {@const optionValue = typeof option === "object" ? String(option.value) : String(option)}
+                            <Select.Item value={optionValue} label={optionValue}>
+                                {#if enumOptions}
+                                    <EnumBadge value={optionValue} enum={enumOptions} />
+                                {:else}
+                                    {optionValue}
+                                {/if}
+                            </Select.Item>
+                        {/each}
+                    </Select.Group>
+                </Select.Content>
+            </Select.Root>
+        </div>
+    {/snippet}
+</FieldWrapper>

package/src/lib/components/detailView/fields/FieldWrapper.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { CircleAlert, CircleHelp } from "lucide-svelte";
+    import * as Tooltip from "../../ui/tooltip";
+    import type { Snippet } from "svelte";
+
+    interface FieldHeader {
+        text: string;
+        icon?: any;
+        typeText?: string;
+        description?: string;
+    }
+
+    interface Props {
+        span?: 1 | 2;
+        isDisabled?: boolean;
+        disabledClasses?: string;
+        errorMessages?: any;
+        header?: FieldHeader;
+        children: Snippet<[]>;
+    }
+
+    let {
+        span = 1,
+        isDisabled = false,
+        disabledClasses = "pointer-events-none opacity-50",
+        errorMessages = [],
+        header,
+        children,
+    }: Props = $props();
+</script>
+
+<div class="{span === 2 ? 'col-span-2' : 'col-span-1'} flex flex-col gap-2 {isDisabled ? 'cursor-not-allowed' : ''}">
+    {#if header}
+        <div class="flex items-center gap-1.5 text-xs">
+            <span>{header.text}</span>
+            {#if header.icon || header.typeText}
+                <span class="flex items-center gap-1 text-[0.7rem] text-muted-foreground">
+                    {#if header.icon}
+                        {@const HeaderIcon = header.icon}
+                        <HeaderIcon size={12} />
+                    {/if}
+                    {header.typeText ?? ''}
+                </span>
+            {/if}
+            {#if header.description}
+                <Tooltip.Root>
+                    <Tooltip.Trigger>
+                        <CircleHelp size={12} class="text-muted-foreground" />
+                    </Tooltip.Trigger>
+                    <Tooltip.Content class="max-w-64 text-xs">
+                        {header.description}
+                    </Tooltip.Content>
+                </Tooltip.Root>
+            {/if}
+        </div>
+    {/if}
+    <div class="{isDisabled ? disabledClasses : ''}">
+        {@render children()}
+        {#if Array.isArray(errorMessages) && errorMessages.length}
+            {#each errorMessages as message}
+                <div class="flex gap-1 text-destructive mt-1">
+                    <CircleAlert size="15" class="translate-y-[0.025rem]" />
+                    <div class="text-[0.7rem]">{message}</div>
+                </div>
+            {/each}
+        {/if}
+    </div>
+</div>

package/src/lib/components/detailView/fields/ForeignKeyField.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { getStudioContext } from "../../../context";
+    import { getExtensionUtils, loadExtensionComponents } from "../../../extensions/extensionUtils";
+    import ForeingKeyInput from "../../foreingKeyInput.svelte";
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        parentCollectionName: string;
+        collectionName: string;
+        fieldName: string;
+        value?: any;
+        entry?: Record<string, any>;
+        destructive?: boolean;
+        changedClass?: string;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+
+    let {
+        parentCollectionName,
+        collectionName,
+        fieldName,
+        value = $bindable(),
+        entry = $bindable(),
+        destructive = false,
+        isDisabled = false,
+        errorMessages = [],
+        header,
+        clearBtn,
+    }: Props = $props();
+
+    const hasExtension = $derived(
+        loadExtensionComponents(ctx, `detailView.fields.foreignKey.${collectionName}`).length > 0
+    );
+</script>
+
+{#if hasExtension}
+    <ExtensionsComponents
+        name="detailView.fields.foreignKey.{collectionName}"
+        utils={getExtensionUtils(lobb, ctx)}
+        {parentCollectionName}
+        {collectionName}
+        bind:value
+        entry={entry!}
+        {fieldName}
+        {destructive}
+        {header}
+        {isDisabled}
+        {errorMessages}
+        {clearBtn}
+    />
+{:else}
+    <FieldWrapper span={1} {isDisabled} {errorMessages} {header}>
+        {#snippet children()}
+            <div class="relative">
+                {#if clearBtn}
+                    <div class="absolute right-1 top-1 z-10">
+                        {@render clearBtn()}
+                    </div>
+                {/if}
+                <ForeingKeyInput
+                    {parentCollectionName}
+                    {collectionName}
+                    bind:value
+                    entry={entry!}
+                    {fieldName}
+                    {destructive}
+                />
+            </div>
+        {/snippet}
+    </FieldWrapper>
+{/if}

package/src/lib/components/detailView/fields/IdField.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Input from "../../ui/input/input.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        changedClass?: string;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+    let { value = $bindable(), changedClass = '', isDisabled = false, errorMessages = [], header, clearBtn }: Props = $props();
+</script>
+
+<FieldWrapper span={1} {isDisabled} {errorMessages} {header}>
+    {#snippet children()}
+        <Input placeholder="AUTO GENERATED" class="bg-muted text-xs {changedClass}" bind:value />
+    {/snippet}
+</FieldWrapper>

package/src/lib/components/detailView/fields/NumberField.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import NumberInput from "../../ui/input/numberInput.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        scale?: number;
+        groupDigits?: boolean;
+        placeholder?: string;
+        destructive?: boolean;
+        changedClass?: string;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+    let { value = $bindable(), scale = 0, groupDigits = false, placeholder = "NULL", destructive = false, changedClass = '', isDisabled = false, errorMessages = [], header, clearBtn }: Props = $props();
+</script>
+
+<FieldWrapper span={1} {isDisabled} {errorMessages} {header}>
+    {#snippet children()}
+        <div class="relative">
+            {#if clearBtn}
+                <div class="absolute right-1 inset-y-0 z-10 flex items-center">
+                    {@render clearBtn()}
+                </div>
+            {/if}
+            <NumberInput
+                {placeholder}
+                {scale}
+                {groupDigits}
+                class="bg-muted text-xs pr-9 {changedClass} {destructive ? 'border-destructive' : ''}"
+                bind:value
+            />
+        </div>
+    {/snippet}
+</FieldWrapper>

package/src/lib/components/detailView/fields/PasswordField.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import PasswordInput from "../passwordInput.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        destructive?: boolean;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+
+    let { value = $bindable(), destructive = false, isDisabled = false, errorMessages = [], header, clearBtn }: Props = $props();
+</script>
+
+<FieldWrapper span={1} {isDisabled} {errorMessages} {header}>
+    {#snippet children()}
+        <div class="relative">
+            {#if clearBtn}
+                <div class="absolute right-1 inset-y-0 z-10 flex items-center">
+                    {@render clearBtn()}
+                </div>
+            {/if}
+            <PasswordInput bind:value {destructive} />
+        </div>
+    {/snippet}
+</FieldWrapper>