@lobb-js/studio 0.47.0 → 0.49.0

package/dist/actions.d.ts

@@ -11,35 +11,9 @@ export interface OpenDataTableDrawerProps {
     position?: "side" | "bottom";
     tabs?: CollectionTab[];
 }
-export interface OpenPopupProps {
-    component: any;
-    componentProps?: Record<string, any>;
-    title?: string;
-    size?: "default" | "sm";
-    hideHeader?: boolean;
-    replaceLast?: boolean;
-}
-export interface OpenDataTablePopupProps {
-    collectionName: string;
-    filter?: Record<string, any>;
-    sort?: Record<string, "asc" | "desc">;
-    limit?: number;
-    title?: string;
-    showHeader?: boolean;
-    showFooter?: boolean;
-    showFilter?: boolean;
-    tabs?: CollectionTab[];
-    view?: {
-        id: string;
-        [key: string]: any;
-    };
-    replaceLast?: boolean;
-    size?: "default" | "sm";
-    hideHeader?: boolean;
-}
 export declare function showDialog(title: string, description: string): Promise<boolean>;
 export declare function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp): void;
 export declare function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp): Promise<void>;
 export declare function openDataTableDrawer(studioContext: StudioContext, props: OpenDataTableDrawerProps): void;
-export declare function openPopup(studioContext: StudioContext, props: OpenPopupProps): void;
-export declare function openDataTablePopup(studioContext: StudioContext, props: OpenDataTablePopupProps): void;
+export { openPopup, openDataTablePopup, goBackPopup } from "./popup";
+export type { OpenPopupProps, OpenDataTablePopupProps } from "./popup";

package/dist/actions.js

@@ -3,18 +3,8 @@ import ConfirmationDialog from "./components/confirmationDialog/confirmationDial
 import CreateDetailView from "./components/detailView/create/createDetailView.svelte";
 import UpdateDetailView from "./components/detailView/update/updateDetailView.svelte";
 import DataTableDrawer from "./components/dataTableDrawer/dataTableDrawer.svelte";
-import DataTable from "./components/dataTable/dataTable.svelte";
-import Popup from "./components/popup/popup.svelte";
 import { createStudioContextMap } from "./context";
 import { getCollectionParamsFields } from "./components/dataTable/utils";
-let activePopup = null;
-function closeActivePopupIfRequested(replaceLast) {
-    if (!replaceLast || !activePopup)
-        return;
-    const toUnmount = activePopup;
-    activePopup = null;
-    unmount(toUnmount, { outro: true });
-}
 export function showDialog(title, description) {
     return new Promise((resolve) => {
         const targetElement = document.querySelector("main");
@@ -90,53 +80,7 @@ export function openDataTableDrawer(studioContext, props) {
         },
     });
 }
-export function openPopup(studioContext, props) {
-    const targetElement = document.querySelector("main");
-    if (!targetElement)
-        throw new Error("main html element doesn't exist");
-    closeActivePopupIfRequested(props.replaceLast);
-    const mounted = mount(Popup, {
-        target: targetElement,
-        context: createStudioContextMap(studioContext),
-        props: {
-            component: props.component,
-            componentProps: props.componentProps,
-            title: props.title,
-            size: props.size,
-            hideHeader: props.hideHeader,
-            onClose: async () => {
-                if (activePopup === mounted)
-                    activePopup = null;
-                await unmount(mounted, { outro: true });
-            },
-        },
-    });
-    activePopup = mounted;
-}
-export function openDataTablePopup(studioContext, props) {
-    // DataTable reads `searchParams` once during its initial $state setup,
-    // so sort/limit need to be folded into the searchParams object before
-    // we mount. Built here in plain TS — no Svelte reactivity to escape.
-    const searchParams = {};
-    if (props.sort)
-        searchParams.sort = props.sort;
-    if (props.limit != null)
-        searchParams.limit = String(props.limit);
-    openPopup(studioContext, {
-        component: DataTable,
-        componentProps: {
-            collectionName: props.collectionName,
-            filter: props.filter,
-            searchParams,
-            showHeader: props.showHeader,
-            showFooter: props.showFooter,
-            showFilter: props.showFilter ?? false,
-            tabs: props.tabs,
-            view: props.view,
-        },
-        title: props.title ?? props.collectionName,
-        size: props.size,
-        hideHeader: props.hideHeader,
-        replaceLast: props.replaceLast,
-    });
-}
+// Popup helpers (openPopup, openDataTablePopup, goBackPopup) live in
+// `./popup` — they share enough state (active overlay, back-history)
+// to warrant their own module.
+export { openPopup, openDataTablePopup, goBackPopup } from "./popup";

package/dist/components/detailView/detailView.svelte

@@ -1,17 +1,11 @@
 <script lang="ts">
-    import { CircleHelp } from "lucide-svelte";
-    import * as Tooltip from "../ui/tooltip";
     import { getStudioContext } from "../../context";
-    import ExtensionsComponents from "../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../extensions/extensionUtils";
-    import { getField, getFieldIcon } from "../dataTable/utils";
     import FieldInput from "./fieldInput.svelte";
-    import { getFieldTypeLabel } from "../../utils";
 
     interface Props {
         collectionName: string;
         entry: Record<string, any>;
-        fieldsErrors?: Record<string, string[]>;
+        fieldsErrors?: Record<string, any>;
         changedFields?: string[];
     }
 
@@ -22,9 +16,7 @@
         changedFields = [],
     }: Props = $props();
 
-    const { lobb, ctx } = getStudioContext();
-    // Singleton collections only ever have one row, and `id` is auto-
-    // generated for that row — there's no value to showing it in the form.
+    const { ctx } = getStudioContext();
     const fieldNames = $derived(
         Object.keys(ctx.meta.collections[collectionName].fields).filter(
             (fieldName) =>
@@ -35,58 +27,16 @@
 
 <div class="grid grid-cols-2 gap-4 p-4">
     {#each fieldNames as fieldName}
-        {#if !ctx.meta.collections[collectionName].fields[fieldName]?.ui?.hidden}
-            {@const field = getField(ctx, fieldName, collectionName)}
-            {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
-            {@const description = ctx.meta.collections[collectionName].fields[fieldName]?.description}
-            {@const fieldDef = ctx.meta.collections[collectionName].fields[fieldName]}
-            {@const isFullWidth = field.type === "text" || field.type === "polymorphic" || fieldDef?.ui?.input?.type === "richtext" || fieldDef?.ui?.span === 2}
-            <div class="flex flex-col gap-2 {isFullWidth ? 'col-span-2' : 'col-span-1'}">
-                <div class="flex flex-1 items-end justify-between gap-2 text-xs">
-                    <div class="flex items-center gap-1.5">
-                        <ExtensionsComponents
-                            name="detailView.field.label"
-                            utils={getExtensionUtils(lobb, ctx)}
-                            {collectionName}
-                            {fieldName}
-                            bind:value={entry[fieldName]}
-                        >
-                            <div class="flex items-center gap-1.5">
-                                <div class="h-fit">{field.label}</div>
-                                <div class="flex h-fit items-center gap-1 text-[0.7rem] text-muted-foreground">
-                                    <FieldIcon size="12" />
-                                    {getFieldTypeLabel(field.type)}
-                                </div>
-                            </div>
-                        </ExtensionsComponents>
-                        {#if description}
-                            <Tooltip.Root>
-                                <Tooltip.Trigger>
-                                    <CircleHelp size="12" class="text-muted-foreground" />
-                                </Tooltip.Trigger>
-                                <Tooltip.Content class="max-w-64 text-xs">
-                                    {description}
-                                </Tooltip.Content>
-                            </Tooltip.Root>
-                        {/if}
-                    </div>
-                    <div>
-                        <ExtensionsComponents
-                            name="dvFields.topRight.{collectionName}.{fieldName}"
-                            utils={getExtensionUtils(lobb, ctx)}
-                            bind:value={entry[fieldName]}
-                        />
-                    </div>
-                </div>
-                <FieldInput
-                    {collectionName}
-                    {fieldName}
-                    bind:value={entry[fieldName]}
-                    bind:entry
-                    errorMessages={fieldsErrors[fieldName]}
-                    changed={changedFields.includes(fieldName)}
-                />
-            </div>
+        {@const fieldDef = ctx.meta.collections[collectionName].fields[fieldName]}
+        {#if !(fieldDef?.ui?.hidden) || (fieldDef as any)?.embedded}
+            <FieldInput
+                {collectionName}
+                {fieldName}
+                bind:value={entry[fieldName]}
+                bind:entry
+                errorMessages={fieldsErrors[fieldName]}
+                changed={changedFields.includes(fieldName)}
+            />
         {/if}
     {/each}
 </div>

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

@@ -1,7 +1,7 @@
 interface Props {
     collectionName: string;
     entry: Record<string, any>;
-    fieldsErrors?: Record<string, string[]>;
+    fieldsErrors?: Record<string, any>;
     changedFields?: string[];
 }
 declare const DetailView: import("svelte").Component<Props, {}, "entry">;