@lobb-js/studio 0.48.0 → 0.49.0

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

@@ -0,0 +1,18 @@
+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<[]>;
+}
+declare const FieldWrapper: import("svelte").Component<Props, {}, "">;
+type FieldWrapper = ReturnType<typeof FieldWrapper>;
+export default FieldWrapper;

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+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<[]>;
+}
+declare const ForeignKeyField: import("svelte").Component<Props, {}, "value" | "entry">;
+type ForeignKeyField = ReturnType<typeof ForeignKeyField>;
+export default ForeignKeyField;

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

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

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

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

package/dist/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>

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

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

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import PolymorphicInput from "../../polymorphicInput.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        collectionField: string;
+        idField: string;
+        virtualField: string;
+        targetCollections: string[];
+        entry: Record<string, any>;
+        destructive?: boolean;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+
+    let {
+        collectionField,
+        idField,
+        virtualField,
+        targetCollections,
+        entry = $bindable(),
+        destructive = false,
+        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 inset-y-0 z-10 flex items-center">
+                    {@render clearBtn()}
+                </div>
+            {/if}
+            <PolymorphicInput
+                {collectionField}
+                {idField}
+                {virtualField}
+                {targetCollections}
+                bind:entry
+                {destructive}
+            />
+        </div>
+    {/snippet}
+</FieldWrapper>

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Input from "../../ui/input/input.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        placeholder?: string;
+        destructive?: boolean;
+        changedClass?: string;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+    let { value = $bindable(), 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}
+            <Input
+                {placeholder}
+                type="text"
+                class="bg-muted text-xs pr-9 {changedClass} {destructive ? 'border-destructive' : ''}"
+                bind:value
+            />
+        </div>
+    {/snippet}
+</FieldWrapper>

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Textarea from "../../ui/textarea/textarea.svelte";
+    import FieldWrapper from "./FieldWrapper.svelte";
+
+    interface Props {
+        value?: any;
+        placeholder?: string;
+        destructive?: boolean;
+        changedClass?: string;
+        isDisabled?: boolean;
+        errorMessages?: any;
+        header?: any;
+        clearBtn?: Snippet<[]>;
+    }
+    let { value = $bindable(), placeholder = "NULL", destructive = false, changedClass = '', 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}
+            <Textarea
+                {placeholder}
+                rows={5}
+                class="bg-muted text-xs pr-9 {changedClass} {destructive ? 'border-destructive' : ''}"
+                bind:value
+            />
+        </div>
+    {/snippet}
+</FieldWrapper>

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

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

package/dist/components/foreingKeyInput.svelte

@@ -80,7 +80,7 @@
         <Input
             placeholder={isPendingCreate ? "AUTO GENERATED" : isEmpty ? "NULL" : ""}
             type="number"
-            class="bg-muted text-xs {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}"
+            class="bg-muted text-xs {bgClass} {destructive ? 'border-destructive' : ''}"
             bind:value={
                 () => hasRealId ? value : "",
                 (v) => { value = (v === "" || v == null) ? null : Number(v); }

package/dist/components/polymorphicInput.svelte

@@ -80,7 +80,7 @@
     }
 </script>
 
-<div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}">
+<div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted {bgClass} {destructive ? 'border-destructive' : ''}">
     <Popover.Root bind:open={collectionPopoverOpen}>
         <Popover.Trigger>
             {#snippet child({ props })}

package/dist/extensions/extension.types.d.ts

@@ -17,6 +17,7 @@ import type RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import type DataTable from "../components/dataTable/dataTable.svelte";
 import type Drawer from "../components/drawer.svelte";
 import type SelectRecord from "../components/selectRecord.svelte";
+import type FieldWrapper from "../components/detailView/fields/FieldWrapper.svelte";
 import * as Popover from "../components/ui/popover";
 import * as intlDate from "@internationalized/date";
 import * as Icons from "lucide-svelte";
@@ -48,6 +49,7 @@ export interface Components {
     Drawer: typeof Drawer;
     SelectRecord: typeof SelectRecord;
     Switch: typeof Switch;
+    FieldWrapper: typeof FieldWrapper;
 }
 export interface ExtensionUtils {
     ctx: CTX;
@@ -122,7 +124,7 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
-export type ExtensionComponentKey = `pages.${string}` | `publicPages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | "detailView.field.label" | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions` | (string & {});
+export type ExtensionComponentKey = `pages.${string}` | `publicPages.${string}` | "studio.listView" | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | "detailView.field.label" | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions` | (string & {});
 export type ExtensionComponent = any | {
     component: any;
     when: (props: Record<string, any>) => boolean;

package/dist/extensions/extensionUtils.js

@@ -25,6 +25,7 @@ import RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import DataTable from "../components/dataTable/dataTable.svelte";
 import Drawer from "../components/drawer.svelte";
 import SelectRecord from "../components/selectRecord.svelte";
+import FieldWrapper from "../components/detailView/fields/FieldWrapper.svelte";
 import { Switch } from "../components/ui/switch";
 export function getComponents() {
     return {
@@ -48,6 +49,7 @@ export function getComponents() {
         Drawer: Drawer,
         SelectRecord: SelectRecord,
         Switch: Switch,
+        FieldWrapper: FieldWrapper,
     };
 }
 export function getExtensionUtils(lobb, ctx) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -37,16 +37,16 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui",
+    "test": "vitest run tests",
+    "test:watch": "vitest tests",
     "test:unit": "vitest",
     "test-storybook": "vitest --project=storybook",
     "prepublishOnly": "./scripts/prepublish.sh",
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.40.0",
     "@chromatic-com/storybook": "^4.1.2",
+    "@lobb-js/core": "^0.41.0",
     "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
@@ -74,7 +74,8 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "vite": "^8.0.13",
-    "vitest": "^4.0.5"
+    "vitest": "^4.0.5",
+    "vitest-browser-svelte": "^2.1.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
@@ -91,7 +92,7 @@
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
     "@internationalized/date": "^3.12.0",
-    "@lobb-js/sdk": "^0.4.0",
+    "@lobb-js/sdk": "^0.5.0",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tiptap/core": "^3.0.0",