@lobb-js/studio 0.48.0 → 0.49.0

package/dist/components/detailView/fields/CodeField.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import CodeEditor from "../../codeEditor.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        field: any;
+        args?: any;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+
+    let { value = $bindable(), field, args, isDisabled = false, errorMessages = [], header, clearBtn }: Props = $props();
+</script>
+
+<FieldWrapper span={2} {isDisabled} {errorMessages} {header}>
+    {#snippet children()}
+        <div class="relative">
+            {#if clearBtn}
+                <div class="absolute right-1 top-1 z-10">
+                    {@render clearBtn()}
+                </div>
+            {/if}
+            <CodeEditor name={field.key} type={args?.type ?? 'javascript'} bind:value />
+        </div>
+    {/snippet}
+</FieldWrapper>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+interface Props {
+    value?: any;
+    field: any;
+    args?: any;
+    isDisabled?: boolean;
+    errorMessages?: any;
+    header?: any;
+    clearBtn?: Snippet<[]>;
+}
+declare const CodeField: import("svelte").Component<Props, {}, "value">;
+type CodeField = ReturnType<typeof CodeField>;
+export default CodeField;

package/dist/components/detailView/fields/CustomInputField.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import FieldCustomInput from "../fieldCustomInput.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        field: any;
+        uiInput: { type: string; args?: any };
+        destructive?: boolean;
+        changedClass?: string;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+
+    let {
+        value = $bindable(),
+        field,
+        uiInput,
+        destructive = false,
+        changedClass = '',
+        isDisabled = false,
+        errorMessages = [],
+        header,
+        clearBtn,
+    }: Props = $props();
+
+    const isFullWidth = uiInput.type === "richtext";
+</script>
+
+<FieldWrapper span={isFullWidth ? 2 : 1} {isDisabled} {errorMessages} {header}>
+    {#snippet children()}
+        <div class="relative {destructive ? 'rounded-md ring-1 ring-destructive bg-destructive/10' : ''}">
+            {#if clearBtn}
+                <div class="absolute right-1 z-10 {isFullWidth ? 'top-1' : 'inset-y-0 flex items-center'}">
+                    {@render clearBtn()}
+                </div>
+            {/if}
+            <FieldCustomInput
+                bind:value
+                type={uiInput.type}
+                args={uiInput.args}
+                {field}
+                {destructive}
+            />
+        </div>
+    {/snippet}
+</FieldWrapper>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    value?: any;
+    field: any;
+    uiInput: {
+        type: string;
+        args?: any;
+    };
+    destructive?: boolean;
+    changedClass?: string;
+    isDisabled?: boolean;
+    errorMessages?: any;
+    header?: any;
+    clearBtn?: Snippet<[]>;
+}
+declare const CustomInputField: import("svelte").Component<Props, {}, "value">;
+type CustomInputField = ReturnType<typeof CustomInputField>;
+export default CustomInputField;

package/dist/components/detailView/fields/DateField.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Input from "../../ui/input/input.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        type: "date" | "time" | "datetime";
+        placeholder?: string;
+        destructive?: boolean;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+    let { value = $bindable(), type, placeholder = "NULL", destructive = false, isDisabled = false, errorMessages = [], header, clearBtn }: Props = $props();
+
+    const inputType = type === "datetime" ? "datetime-local" : type;
+
+    function getDisplayValue() {
+        if (!value) return;
+        if (type === "date") return new Date(value).toISOString().split("T")[0];
+        if (type === "datetime") return new Date(value).toISOString().slice(0, 16);
+        return value;
+    }
+</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}
+            <Input
+                type={inputType}
+                {placeholder}
+                class="dateInput block w-full bg-muted pr-9 text-xs {destructive ? 'border-destructive' : ''}"
+                bind:value={
+                    () => getDisplayValue(),
+                    (v) => { value = v; }
+                }
+            />
+        </div>
+    {/snippet}
+</FieldWrapper>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    value?: any;
+    type: "date" | "time" | "datetime";
+    placeholder?: string;
+    destructive?: boolean;
+    isDisabled?: boolean;
+    errorMessages?: any;
+    header?: any;
+    clearBtn?: Snippet<[]>;
+}
+declare const DateField: import("svelte").Component<Props, {}, "value">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

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

@@ -0,0 +1,13 @@
+interface Props {
+    collectionName: string;
+    fieldName: string;
+    value?: any;
+    entry: Record<string, any>;
+    isDisabled?: boolean;
+    errorMessages?: any;
+    header?: any;
+    onClear?: () => void;
+}
+declare const EmbeddedField: import("svelte").Component<Props, {}, "value" | "entry">;
+type EmbeddedField = ReturnType<typeof EmbeddedField>;
+export default EmbeddedField;

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

@@ -0,0 +1,13 @@
+interface Props {
+    virtualField: string;
+    collectionField: string;
+    idField: string;
+    targetCollections: string[];
+    entry: Record<string, any>;
+    isDisabled?: boolean;
+    errorMessages?: any;
+    header?: any;
+}
+declare const EmbeddedPolymorphicField: import("svelte").Component<Props, {}, "entry">;
+type EmbeddedPolymorphicField = ReturnType<typeof EmbeddedPolymorphicField>;
+export default EmbeddedPolymorphicField;

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { EnumOption } from "@lobb-js/core";
+interface Props {
+    value?: any;
+    rawEnum: (string | number | EnumOption)[];
+    isNumeric?: boolean;
+    placeholder?: string;
+    destructive?: boolean;
+    changedClass?: string;
+    isDisabled?: boolean;
+    errorMessages?: any;
+    header?: any;
+    clearBtn?: Snippet<[]>;
+}
+declare const EnumField: import("svelte").Component<Props, {}, "value">;
+type EnumField = ReturnType<typeof EnumField>;
+export default EnumField;