@lobb-js/studio 0.48.0 → 0.49.0

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/extensions/extension.types.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"
@@ -51,6 +52,7 @@ export interface Components {
     Drawer: typeof Drawer;
     SelectRecord: typeof SelectRecord,
     Switch: typeof Switch,
+    FieldWrapper: typeof FieldWrapper,
 }
 
 export interface ExtensionUtils {
@@ -137,7 +139,6 @@ 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}`

package/src/lib/extensions/extensionUtils.ts

@@ -33,6 +33,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(): Components {
@@ -57,6 +58,7 @@ export function getComponents(): Components {
     Drawer: Drawer,
     SelectRecord: SelectRecord,
     Switch: Switch,
+    FieldWrapper: FieldWrapper,
   };
 }