@lobb-js/studio 0.19.1 → 0.20.0

package/dist/components/dataTable/fieldCell.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { getFieldRelation } from "../../utils";
+    import { getFieldRelationTarget, getPolymorphicRelation, isRelationField } from "../../relations";
     import { ExternalLink } from "lucide-svelte";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { getField } from "./utils";
     import EnumBadge from "./enumBadge.svelte";
-    import _ from "lodash";
+    import PolymorphicFieldCell from "./polymorphicFieldCell.svelte";
     import { getStudioContext } from "../../context";
 
     const { ctx } = getStudioContext();
@@ -26,49 +26,50 @@
     }: Props = $props();
 
     const field = getField(ctx, fieldName, collectionName);
-    const relation = getFieldRelation(ctx, collectionName, fieldName);
-    const isRefrenceField = Boolean(
-        getFieldRelation(ctx, collectionName, fieldName),
-    );
+    const relationTarget = getFieldRelationTarget(ctx, collectionName, fieldName);
+    const polymorphicRelation = getPolymorphicRelation(ctx, collectionName, fieldName);
+    const isRefrenceField = isRelationField(ctx, collectionName, fieldName);
     const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
 </script>
 
-{#if isPasswordField}
+{#if polymorphicRelation}
+    <PolymorphicFieldCell
+        collectionField={polymorphicRelation.from.collection_field}
+        idField={polymorphicRelation.from.id_field}
+        {entry}
+        bind:tableParams
+    />
+{:else if isRefrenceField}
+    {#if value?.id && value.id !== 0}
+        <div class="flex items-center gap-2">
+            <div>{value.id}</div>
+            {#if Object.values(value)[1]}
+                <div class="border bg-muted px-3 py-1 rounded-full">
+                    {Object.values(value)[1]}
+                </div>
+            {/if}
+            <UpdateDetailViewButton
+                collectionName={relationTarget!}
+                recordId={value.id}
+                variant="ghost"
+                class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                Icon={ExternalLink}
+                onSuccessfullSave={async () => {
+                    tableParams = { ...tableParams };
+                }}
+            />
+        </div>
+    {:else if value?.id === 0}
+        <div class="text-muted-foreground">PARENT ID</div>
+    {:else}
+        <div class="text-muted-foreground">NULL</div>
+    {/if}
+{:else if isPasswordField}
     <div class="text-muted-foreground tracking-widest">••••••</div>
 {:else if value === ""}
     <div class="text-muted-foreground">EMPTY STRING</div>
 {:else if value === null || value === undefined}
     <div class="text-muted-foreground">NULL</div>
-{:else if isRefrenceField}
-    {#if typeof value !== "object"}
-        <div>{value}</div>
-    {:else if value.id !== 0}
-        {@const primaryField = Object.values(value)[1]}
-        {#if value.id}
-            <div class="flex items-center gap-2">
-                <div>{value.id}</div>
-                {#if primaryField}
-                    <div class="border bg-muted px-3 py-1 rounded-full">
-                        {primaryField}
-                    </div>
-                {/if}
-                <UpdateDetailViewButton
-                    collectionName={relation.to.collection}
-                    recordId={value.id}
-                    variant="ghost"
-                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                    Icon={ExternalLink}
-                    onSuccessfullSave={async () => {
-                        tableParams = { ...tableParams };
-                    }}
-                ></UpdateDetailViewButton>
-            </div>
-        {:else}
-            <div class="text-muted-foreground">NULL</div>
-        {/if}
-    {:else}
-        <div class="text-muted-foreground">PARENT ID</div>
-    {/if}
 {:else if field?.enum}
     <EnumBadge {value} enum={field.enum} />
 {:else if field.type === "datetime"}

package/dist/components/dataTable/polymorphicFieldCell.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { ExternalLink, Table } from "lucide-svelte";
+    import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
+
+    interface Props {
+        collectionField: string;
+        idField: string;
+        entry: Record<string, any>;
+        tableParams?: any;
+    }
+
+    let {
+        collectionField,
+        idField,
+        entry,
+        tableParams = $bindable(),
+    }: Props = $props();
+
+    const targetCollection = $derived(entry[collectionField] ?? null);
+    const targetId = $derived(entry[idField] ?? null);
+</script>
+
+{#if targetId && targetCollection}
+    <div class="flex items-center gap-2">
+        <div class="flex items-center gap-1 border bg-muted px-2 py-1 rounded-md text-muted-foreground">
+            <Table size="11" />
+            {targetCollection}
+        </div>
+        <div>{targetId}</div>
+        <UpdateDetailViewButton
+            collectionName={targetCollection}
+            recordId={targetId}
+            variant="ghost"
+            class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+            Icon={ExternalLink}
+            onSuccessfullSave={async () => {
+                tableParams = { ...tableParams };
+            }}
+        />
+    </div>
+{:else}
+    <div class="text-muted-foreground">NULL</div>
+{/if}

package/dist/components/dataTable/polymorphicFieldCell.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    collectionField: string;
+    idField: string;
+    entry: Record<string, any>;
+    tableParams?: any;
+}
+declare const PolymorphicFieldCell: import("svelte").Component<Props, {}, "tableParams">;
+type PolymorphicFieldCell = ReturnType<typeof PolymorphicFieldCell>;
+export default PolymorphicFieldCell;

package/dist/components/dataTable/utils.js

@@ -1,9 +1,14 @@
-import { Binary, Braces, Brackets, Calendar, CalendarClock, Clock, Hash, Key, Text, Type, } from "lucide-svelte/icons";
+import { getFieldRelationTarget } from "../../relations";
+import { Binary, Braces, Brackets, Calendar, CalendarClock, Clock, Hash, Key, Link, Text, Type, } from "lucide-svelte/icons";
+import { icons } from "lucide-svelte";
 export function getCollectionColumns(ctx, collectionName) {
+    var _a;
     var collectionFields = getFields(ctx, collectionName);
     var headers = [];
     for (var fieldName in collectionFields) {
         var field = collectionFields[fieldName];
+        if ((_a = field.ui) === null || _a === void 0 ? void 0 : _a.hidden)
+            continue;
         headers.push({
             id: field.key,
             subtext: field.type,
@@ -13,7 +18,11 @@ export function getCollectionColumns(ctx, collectionName) {
     return headers;
 }
 export function getFieldIcon(ctx, fieldName, collectionName) {
+    var _a, _b, _c;
     var field = getField(ctx, fieldName, collectionName);
+    var uiIcon = (_a = field.ui) === null || _a === void 0 ? void 0 : _a.icon;
+    if (uiIcon && uiIcon in icons)
+        return icons[uiIcon];
     if (fieldName === "id") {
         return Key;
     }
@@ -33,6 +42,13 @@ export function getFieldIcon(ctx, fieldName, collectionName) {
         return Binary;
     }
     else if (field.type === "integer") {
+        var target = getFieldRelationTarget(ctx, collectionName, fieldName);
+        if (target) {
+            var targetIcon = (_c = (_b = ctx.meta.collections[target]) === null || _b === void 0 ? void 0 : _b.ui) === null || _c === void 0 ? void 0 : _c.icon;
+            if (targetIcon && targetIcon in icons)
+                return icons[targetIcon];
+            return Link;
+        }
         return Hash;
     }
     else if (field.type === "long") {
@@ -53,7 +69,7 @@ export function getFieldIcon(ctx, fieldName, collectionName) {
     else if (field.type === "time") {
         return Clock;
     }
-    throw new Error("(".concat(field.type, ") doesnt have an icon"));
+    return Braces;
 }
 export function getFields(ctx, collectionName) {
     return ctx.meta.collections[collectionName].fields;
@@ -78,7 +94,7 @@ export function getCollectionParamsFields(ctx, collectionName, allFields) {
     var relations = ctx.meta.relations;
     var foreignFields = relations
         .filter(function (relation) {
-        return relation.from.collection === collectionName;
+        return relation.type !== "polymorphic" && relation.from.collection === collectionName;
     })
         .map(function (relation) {
         return {

package/dist/components/detailView/create/createDetailView.svelte

@@ -161,46 +161,38 @@
     <div class="flex-1 overflow-y-auto">
         <div class="flex flex-col gap-4 p-4">
             {#each fieldNames as fieldName}
-                {@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}
+                {#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>
-                        <div>
-                            <ExtensionsComponents
-                                name="dvFields.topRight.{collectionName}.{fieldName}"
-                                utils={getExtensionUtils(lobb, ctx)}
-                                bind:value={entry[fieldName]}
-                            />
-                        </div>
+                        <FieldInput
+                            {collectionName}
+                            {fieldName}
+                            bind:value={
+                                () => entry[fieldName],
+                                (v) => (entry = { ...entry, [fieldName]: v })
+                            }
+                            bind:entry
+                            errorMessages={fieldsErrors[fieldName]}
+                        />
                     </div>
-                    <FieldInput
-                        {collectionName}
-                        {fieldName}
-                        bind:value={
-                            () => entry[fieldName],
-                            (v) =>
-                                (entry = {
-                                    ...entry,
-                                    [fieldName]: v,
-                                })
-                        }
-                        {entry}
-                        errorMessages={fieldsErrors[fieldName]}
-                    />
-                </div>
+                {/if}
             {/each}
         </div>
         {#if showRelatedRecords}

package/dist/components/detailView/fieldInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getStudioContext } from "../../context";
-	import { getFieldRelation } from "../../utils";
+	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";
@@ -11,6 +11,7 @@
 	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";
 
@@ -29,7 +30,7 @@
 		fieldName,
 		value = $bindable(),
 		errorMessages = [],
-		entry,
+		entry = $bindable(),
 	}: Props = $props();
 
 	const ui_input =
@@ -37,10 +38,11 @@
 	const ui =
 		ctx.meta.collections[collectionName].fields[fieldName].ui;
 	const field = getField(ctx, fieldName, collectionName);
-	const fieldRelation = getFieldRelation(ctx, collectionName, fieldName);
+	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(Boolean(errorMessages.length));
+	const destructive: boolean = $derived(!isDisabled && Boolean(errorMessages.length));
 
 </script>
 
@@ -53,13 +55,27 @@
 		style="flex: 2;"
 	>
 		<Button
-			onclick={() => (value = null)}
+			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 ui_input}
+		{#if polymorphicRelation && entry}
+			<PolymorphicInput
+				collectionField={polymorphicRelation.from.collection_field}
+				idField={polymorphicRelation.from.id_field}
+				targetCollections={polymorphicRelation.to}
+				bind:entry
+				{destructive}
+			/>
+		{:else if ui_input}
 			<FieldCustomInput
 				bind:value
 				type={ui_input.type}
@@ -73,12 +89,12 @@
 				class="bg-muted/30 text-xs"
 				bind:value
 			/>
-		{:else if fieldRelation && entry}
+		{:else if fieldRelationTarget && entry}
 			<ExtensionsComponents
-				name="detailView.fields.foreignKey.{fieldRelation.to.collection}"
+				name="detailView.fields.foreignKey.{fieldRelationTarget}"
 				utils={getExtensionUtils(lobb, ctx)}
 				parentCollectionName={collectionName}
-				collectionName={fieldRelation.to.collection}
+				collectionName={fieldRelationTarget}
 				bind:value
 				{entry}
 				fieldName={field.key}
@@ -86,7 +102,7 @@
 			>
 				<ForeingKeyInput
 					parentCollectionName={collectionName}
-					collectionName={fieldRelation.to.collection}
+					collectionName={fieldRelationTarget}
 					bind:value
 					{entry}
 					fieldName={field.key}
@@ -263,7 +279,7 @@
 				bind:value
 			/>
 		{/if}
-		{#if errorMessages}
+		{#if !isDisabled && errorMessages}
 			{#each errorMessages as message}
 				<div class="flex gap-1 text-destructive">
 					<CircleAlert size="15" class="translate-y-[0.025rem]" />

package/dist/components/detailView/fieldInput.svelte.d.ts

@@ -5,6 +5,6 @@ interface Props {
     errorMessages?: string[];
     entry?: Record<string, any>;
 }
-declare const FieldInput: import("svelte").Component<Props, {}, "value">;
+declare const FieldInput: import("svelte").Component<Props, {}, "value" | "entry">;
 type FieldInput = ReturnType<typeof FieldInput>;
 export default FieldInput;

package/dist/components/detailView/update/updateDetailView.svelte

@@ -113,39 +113,35 @@
     <div class="flex-1 overflow-y-auto">
         <div class="flex flex-col gap-4 p-4">
             {#each fieldNames as fieldName}
-                {@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}
+                {#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>
-                        <div>
-                            <ExtensionsComponents
-                                name="dvFields.topRight.{collectionName}.{fieldName}"
-                                utils={getExtensionUtils(lobb, ctx)}
-                                bind:value={entry[fieldName]}
-                            />
-                        </div>
+                        <FieldInput
+                            {collectionName}
+                            {fieldName}
+                            bind:value={entry[fieldName]}
+                            bind:entry
+                            errorMessages={fieldsErrors[fieldName]}
+                        />
                     </div>
-                    <FieldInput
-                        {collectionName}
-                        {fieldName}
-                        bind:value={entry[fieldName]}
-                        {entry}
-                        errorMessages={fieldsErrors[fieldName]}
-                    />
-                </div>
+                {/if}
             {/each}
         </div>
         {#if showRelatedRecords}

package/dist/components/detailView/utils.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import Mustache from "mustache";
-import { getFieldRelation } from "../../utils";
+import { isRelationField } from "../../relations";
 import { getField } from "../dataTable/utils";
 export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
     return Object.fromEntries(fieldNames.map(function (fieldName) {
@@ -40,11 +40,24 @@ export function serializeEntry(ctx, collectionName, entry, rollback) {
     // serialize the foreign key field's value
     for (var _i = 0, _a = Object.entries(entry); _i < _a.length; _i++) {
         var _b = _a[_i], fieldName = _b[0], fieldValue = _b[1];
-        var isRefrenceField = Boolean(getFieldRelation(ctx, collectionName, fieldName));
+        var isRefrenceField = isRelationField(ctx, collectionName, fieldName);
         if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
             entry[fieldName] = fieldValue.id;
         }
     }
+    // serialize polymorphic id_field values ({ id: 5, title: "..." } → 5)
+    for (var _c = 0, _d = ctx.meta.relations; _c < _d.length; _c++) {
+        var relation = _d[_c];
+        if (relation.type !== "polymorphic")
+            continue;
+        if (relation.from.collection !== collectionName)
+            continue;
+        var idField = relation.from.id_field;
+        var fieldValue = entry[idField];
+        if (fieldValue !== null && typeof fieldValue === "object" && fieldValue.id !== undefined) {
+            entry[idField] = fieldValue.id;
+        }
+    }
     // check for related collections properties and serialize them too
     if (!rollback) {
         var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.to.collection === collectionName; });
@@ -118,7 +131,7 @@ export function generateTransactionBody(ctx, collectionName, entry) {
 }
 export function parseDetailViewValues(ctx, collectionName, values) {
     var forignFieldNames = ctx.meta.relations
-        .filter(function (relation) { return relation.from.collection === collectionName; })
+        .filter(function (relation) { return relation.type !== "polymorphic" && relation.from.collection === collectionName; })
         .map(function (relation) { return relation.from.field; });
     var childCollectionNames = ctx.meta.relations
         .filter(function (relation) { return relation.to.collection === collectionName; })
@@ -138,6 +151,18 @@ export function parseDetailViewValues(ctx, collectionName, values) {
             }
         }
     }
+    // wrap polymorphic id_field scalar values into { id: value }
+    for (var _c = 0, _d = ctx.meta.relations; _c < _d.length; _c++) {
+        var relation = _d[_c];
+        if (relation.type !== "polymorphic")
+            continue;
+        if (relation.from.collection !== collectionName)
+            continue;
+        var idField = relation.from.id_field;
+        if (idField in values && typeof values[idField] === 'number') {
+            values[idField] = { id: values[idField] };
+        }
+    }
 }
 export function getCollectionFields(ctx, collectionName) {
     var returnedData = [];