@lobb-js/studio 0.47.0 → 0.49.0

package/src/lib/components/detailView/fieldInput.svelte

@@ -1,296 +1,169 @@
 <script lang="ts">
-	import { getStudioContext } from "../../context";
-	import { getFieldRelationTarget, getPolymorphicRelation } from "../../relations";
-	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
-	import { getField } from "../dataTable/utils";
-	import Button from "../ui/button/button.svelte";
-	import FieldCustomInput from "./fieldCustomInput.svelte";
-	import Input from "../ui/input/input.svelte";
-	import NumberInput from "../ui/input/numberInput.svelte";
-	import * as Select from "../ui/select/index";
-	import EnumBadge from "../dataTable/enumBadge.svelte";
-	import type { EnumOption } from "@lobb-js/core";
-	import Textarea from "../ui/textarea/textarea.svelte";
-	import ForeingKeyInput from "../foreingKeyInput.svelte";
-	import PolymorphicInput from "../polymorphicInput.svelte";
-    import ExtensionsComponents from "../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import { getStudioContext } from "../../context";
+    import { getFieldRelationTarget, getPolymorphicRelation } from "../../relations";
+    import { Ban } from "lucide-svelte";
+    import { getField, getFieldIcon } from "../dataTable/utils";
+    import { getFieldTypeLabel } from "../../utils";
+    import Button from "../ui/button/button.svelte";
+    import type { EnumOption } from "@lobb-js/core";
 
-	const { ctx, lobb } = getStudioContext();
+    import ForeignKeyField from "./fields/ForeignKeyField.svelte";
+    import PolymorphicField from "./fields/PolymorphicField.svelte";
+    import EmbeddedField from "./fields/EmbeddedField.svelte";
+    import EmbeddedPolymorphicField from "./fields/EmbeddedPolymorphicField.svelte";
+    import RichTextField from "./fields/RichTextField.svelte";
+    import CodeField from "./fields/CodeField.svelte";
+    import PasswordField from "./fields/PasswordField.svelte";
+    import IdField from "./fields/IdField.svelte";
+    import StringField from "./fields/StringField.svelte";
+    import TextField from "./fields/TextField.svelte";
+    import NumberField from "./fields/NumberField.svelte";
+    import DateField from "./fields/DateField.svelte";
+    import BoolField from "./fields/BoolField.svelte";
+    import EnumField from "./fields/EnumField.svelte";
 
-	interface Props {
-		collectionName: string;
-		fieldName: string;
-		value: any;
-		errorMessages?: string[];
-		entry?: Record<string, any>;
-		changed?: boolean;
-	}
+    const { ctx } = getStudioContext();
 
-	let {
-		collectionName,
-		fieldName,
-		value = $bindable(),
-		errorMessages = [],
-		entry = $bindable(),
-		changed = false,
-	}: Props = $props();
+    interface Props {
+        collectionName: string;
+        fieldName: string;
+        value: any;
+        errorMessages?: any;
+        entry?: Record<string, any>;
+        changed?: boolean;
+    }
 
-	const ui_input =
-		ctx.meta.collections[collectionName].fields[fieldName].ui?.input;
-	const ui =
-		ctx.meta.collections[collectionName].fields[fieldName].ui;
-	const field = getField(ctx, fieldName, collectionName);
-	const fieldRelationTarget = getFieldRelationTarget(ctx, collectionName, fieldName);
-	const polymorphicRelation = getPolymorphicRelation(ctx, collectionName, fieldName);
-	const isDisabled = field.key === 'id' || Boolean(ui?.disabled)
-	const disabledClasses = "pointer-events-none opacity-50";
-	const destructive: boolean = $derived(!isDisabled && Boolean(errorMessages.length));
-	const changedClass = $derived(changed && !destructive ? '!bg-orange-500/5' : '');
+    let {
+        collectionName,
+        fieldName,
+        value = $bindable(),
+        errorMessages = [],
+        entry = $bindable(),
+        changed = false,
+    }: Props = $props();
 
+    const fieldDef = ctx.meta.collections[collectionName].fields[fieldName];
+    const ui_input = fieldDef?.ui?.input;
+    const ui = fieldDef?.ui;
+    const field = getField(ctx, fieldName, collectionName);
+    const fieldRelationTarget = getFieldRelationTarget(ctx, collectionName, fieldName);
+    const polymorphicRelation = getPolymorphicRelation(ctx, collectionName, fieldName);
+    const isDisabled = field.key === 'id' || Boolean(ui?.disabled);
+    const destructive: boolean = $derived(Array.isArray(errorMessages) && errorMessages.length > 0);
+    const changedClass = $derived(changed && !destructive ? '!bg-orange-500/5' : '');
+    const isEmbedded = !!(fieldRelationTarget && entry && (fieldDef as any)?.embedded);
+    const isEmbeddedPolymorphic = !!(polymorphicRelation && entry && (fieldDef as any)?.embedded);
+
+    const FieldIcon = getFieldIcon(ctx, fieldName, collectionName);
+    const labelData = {
+        text: field.label,
+        icon: FieldIcon,
+        typeText: getFieldTypeLabel(field.type),
+        description: fieldDef?.description as string | undefined,
+    };
+
+    function handleClear(e: MouseEvent) {
+        e.stopPropagation();
+        value = null;
+        if (polymorphicRelation && entry) {
+            entry[polymorphicRelation.from.collection_field] = null;
+            entry[polymorphicRelation.from.id_field] = null;
+        }
+    }
 </script>
 
-<div class="{isDisabled ? "cursor-not-allowed" : ''}">
-	<div
-		class="
-			relative flex flex-col gap-2
-			{isDisabled ? disabledClasses : ''}
-		"
-		style="flex: 2;"
-	>
-		<Button
-			onclick={() => {
-				value = null;
-				if (polymorphicRelation && entry) {
-					entry[polymorphicRelation.from.collection_field] = null;
-					entry[polymorphicRelation.from.id_field] = null;
-				}
-			}}
-			variant="outline"
-			class="absolute right-0 top-0 z-10 mr-1.5 mt-1.5 aspect-square h-6 w-6 p-0"
-			Icon={Ban}
-			tabindex={-1}
-		></Button>
-		{#if polymorphicRelation && entry}
-			<PolymorphicInput
-				collectionField={polymorphicRelation.from.collection_field}
-				idField={polymorphicRelation.from.id_field}
-				virtualField={polymorphicRelation.from.virtual_field ?? ''}
-				targetCollections={polymorphicRelation.to}
-				bind:entry
-				{destructive}
-			/>
-		{:else if ui_input}
-			<FieldCustomInput
-				bind:value
-				type={ui_input.type}
-				args={ui_input.args}
-				{field}
-				{destructive}
-			/>
-		{:else if field.label === "id"}
-			<Input
-				placeholder="AUTO GENERATED"
-				class="bg-muted text-xs {changedClass}"
-				bind:value
-			/>
-		{:else if fieldRelationTarget && entry}
-			<ExtensionsComponents
-				name="detailView.fields.foreignKey.{fieldRelationTarget}"
-				utils={getExtensionUtils(lobb, ctx)}
-				parentCollectionName={collectionName}
-				collectionName={fieldRelationTarget}
-				bind:value
-				{entry}
-				fieldName={field.key}
-				{destructive}
-			>
-				<ForeingKeyInput
-					parentCollectionName={collectionName}
-					collectionName={fieldRelationTarget}
-					bind:value
-					{entry}
-					fieldName={field.key}
-					{destructive}
-				/>
-			</ExtensionsComponents>
-		{:else if field.enum}
-			{@const rawEnum = field.enum as (string | number | EnumOption)[]}
-			{@const isEnumOption = rawEnum.length > 0 && typeof rawEnum[0] === "object"}
-			{@const enumOptions = isEnumOption ? rawEnum as EnumOption[] : undefined}
-			<Select.Root
-				type="single"
-				bind:value={
-					() => value != null ? String(value) : null,
-					(v) => {
-						if (v == null) { value = null; return; }
-						const isNumeric = field.type === "integer" || field.type === "long" || field.type === "decimal" || field.type === "float";
-						value = isNumeric ? Number(v) : v;
-					}
-				}
-			>
-				<Select.Trigger
-					class="h-9 w-full bg-muted pr-8 {changedClass} {destructive ? 'border-destructive !bg-destructive/10' : ''}"
-				>
-					{#if value != null && enumOptions}
-						<EnumBadge value={String(value)} enum={enumOptions} />
-					{:else if value != null}
-						{value}
-					{:else}
-						<span class="text-muted-foreground">{ui?.placeholder ?? "NULL"}</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>
-		{:else if field.type === "string"}
-			<Input
-				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="text"
-				class="
-					bg-muted text-xs {changedClass}
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
-				bind:value
-			/>
-		{:else if field.type === "text"}
-			<Textarea
-				placeholder={ui?.placeholder ? ui.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
-				rows={5}
-				class="
-					bg-muted text-xs {changedClass}
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
-				bind:value
-			/>
-		{:else if field.type === "date"}
-			<Input
-				type="date"
-				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				class="
-					dateInput block w-full bg-muted pr-9 text-xs
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
-				bind:value={
-					() => {
-						if (!value) {
-							return;
-						}
-						const date = new Date(value);
-						return date.toISOString().split("T")[0];
-					},
-					(v) => (value = v)
-				}
-			/>
-		{:else if field.type === "time"}
-			<Input
-				type="time"
-				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				class="
-					dateInput block w-full bg-muted pr-9 text-xs
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
-				bind:value={
-					() => {
-						if (!value) {
-							return;
-						}
-						return value;
-					},
-					(v) => (value = v)
-				}
-			/>
-		{:else if field.type === "datetime"}
-			<Input
-				type="datetime-local"
-				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				class="
-					dateInput block w-full bg-muted pr-9 text-xs
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
-				bind:value={
-					() => {
-						if (!value) {
-							return;
-						}
-						const date = new Date(value);
-						return date.toISOString().slice(0, 16);
-					},
-					(v) => {
-						value = v;
-					}
-				}
-			/>
-		{:else if field.type === "bool"}
-			<Select.Root type="single" bind:value>
-				<Select.Trigger
-					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-					class="
-						bg-muted pr-9
-						{destructive ? 'border-destructive bg-destructive/10' : ''}
-					"
-				>
-					{String(value).toUpperCase()}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Item value={"true"} class="flex gap-1.5">
-						<Check size="15" />
-						TRUE
-					</Select.Item>
-					<Select.Item value={"false"} class="flex gap-1.5">
-						<X size="15" />
-						FALSE
-					</Select.Item>
-					<Select.Item value={"null"} class="flex gap-1.5">
-						<Ban size="15" />
-						NULL
-					</Select.Item>
-				</Select.Content>
-			</Select.Root>
-		{:else if field.type === "decimal" || field.type === "float" || field.type === "integer" || field.type === "long"}
-			{@const isFloat = field.type === "decimal" || field.type === "float"}
-			<NumberInput
-				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				scale={isFloat ? 20 : 0}
-				groupDigits={ui?.groupDigits ?? false}
-				class="
-					bg-muted text-xs {changedClass}
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
-				bind:value
-			/>
-		{:else}
-			<Input
-				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="text"
-				class="
-					bg-muted text-xs {changedClass}
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
-				bind:value
-			/>
-		{/if}
-		{#if !isDisabled && errorMessages}
-			{#each errorMessages as message}
-				<div class="flex gap-1 text-destructive">
-					<CircleAlert size="15" class="translate-y-[0.025rem]" />
-					<div class="text-[0.7rem]">
-						{message}
-					</div>
-				</div>
-			{/each}
-		{/if}
-	</div>
-</div>
+{#snippet clearBtn()}
+    {#if !isDisabled}
+        <Button
+            onclick={handleClear}
+            variant="outline"
+            class="aspect-square h-6 w-6 shrink-0 p-0"
+            Icon={Ban}
+            tabindex={-1}
+        />
+    {/if}
+{/snippet}
+
+{#if isEmbeddedPolymorphic && entry}
+    <EmbeddedPolymorphicField
+        virtualField={polymorphicRelation!.from.virtual_field ?? fieldName}
+        collectionField={polymorphicRelation!.from.collection_field}
+        idField={polymorphicRelation!.from.id_field}
+        targetCollections={polymorphicRelation!.to}
+        bind:entry
+        {isDisabled}
+        {errorMessages}
+        header={labelData}
+    />
+{:else if polymorphicRelation && entry}
+    <PolymorphicField
+        collectionField={polymorphicRelation.from.collection_field}
+        idField={polymorphicRelation.from.id_field}
+        virtualField={polymorphicRelation.from.virtual_field ?? ''}
+        targetCollections={polymorphicRelation.to}
+        bind:entry
+        {destructive}
+        {isDisabled}
+        {errorMessages}
+        header={labelData}
+        {clearBtn}
+    />
+{:else if isEmbedded}
+    <EmbeddedField
+        collectionName={fieldRelationTarget!}
+        {fieldName}
+        bind:value
+        entry={entry!}
+        {isDisabled}
+        {errorMessages}
+        header={labelData}
+        onClear={handleClear}
+    />
+{:else if ui_input?.type === 'richtext'}
+    <RichTextField bind:value {field} {destructive} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if ui_input?.type === 'code'}
+    <CodeField bind:value {field} args={ui_input.args} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if ui_input?.type === 'password'}
+    <PasswordField bind:value {destructive} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if fieldRelationTarget && entry}
+    <ForeignKeyField
+        parentCollectionName={collectionName}
+        collectionName={fieldRelationTarget}
+        {fieldName}
+        bind:value
+        bind:entry
+        {destructive}
+        {isDisabled}
+        {errorMessages}
+        header={labelData}
+        {clearBtn}
+    />
+{:else if field.label === "id"}
+    <IdField bind:value {changedClass} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if field.enum}
+    <EnumField
+        bind:value
+        rawEnum={field.enum as (string | number | EnumOption)[]}
+        isNumeric={field.type === "integer" || field.type === "long" || field.type === "decimal" || field.type === "float"}
+        placeholder={ui?.placeholder}
+        {destructive} {changedClass} {isDisabled} {errorMessages} header={labelData} {clearBtn}
+    />
+{:else if field.type === "string"}
+    <StringField bind:value placeholder={ui?.placeholder} {destructive} {changedClass} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if field.type === "text"}
+    <TextField bind:value placeholder={ui?.placeholder ?? (value === "" ? "EMPTY STRING" : "NULL")} {destructive} {changedClass} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if field.type === "date" || field.type === "time" || field.type === "datetime"}
+    <DateField bind:value type={field.type} placeholder={ui?.placeholder} {destructive} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if field.type === "bool"}
+    <BoolField bind:value placeholder={ui?.placeholder} {destructive} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{:else if field.type === "decimal" || field.type === "float" || field.type === "integer" || field.type === "long"}
+    <NumberField
+        bind:value
+        scale={field.type === "decimal" || field.type === "float" ? 20 : 0}
+        groupDigits={ui?.groupDigits ?? false}
+        placeholder={ui?.placeholder}
+        {destructive} {changedClass} {isDisabled} {errorMessages} header={labelData} {clearBtn}
+    />
+{:else}
+    <StringField bind:value placeholder={ui?.placeholder} {destructive} {changedClass} {isDisabled} {errorMessages} header={labelData} {clearBtn} />
+{/if}

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { Ban, Check, X } from "lucide-svelte";
+    import * as Select from "../../ui/select/index";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        placeholder?: string;
+        destructive?: boolean;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+    let { value = $bindable(), placeholder = "NULL", 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}
+            <Select.Root type="single" bind:value>
+                <Select.Trigger
+                    {placeholder}
+                    class="bg-muted pr-9 {destructive ? 'border-destructive' : ''}"
+                >
+                    {String(value).toUpperCase()}
+                </Select.Trigger>
+                <Select.Content>
+                    <Select.Item value={"true"} class="flex gap-1.5"><Check size="15" />TRUE</Select.Item>
+                    <Select.Item value={"false"} class="flex gap-1.5"><X size="15" />FALSE</Select.Item>
+                    <Select.Item value={"null"} class="flex gap-1.5"><Ban size="15" />NULL</Select.Item>
+                </Select.Content>
+            </Select.Root>
+        </div>
+    {/snippet}
+</FieldWrapper>

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