@lobb-js/studio 0.30.0 → 0.32.0

package/src/lib/components/ui/input/numberInput.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import IMask from "imask";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	// Locale-neutral grouping: space for thousands, dot for decimals
+	// (ISO 31-0). Norwegian, French, scientific contexts — same shape, and
+	// space can't be confused with comma-as-decimal vs comma-as-thousands.
+	const THOUSANDS = " ";
+	const RADIX = ".";
+
+	type Props = Omit<HTMLInputAttributes, "type" | "value" | "step"> & {
+		value?: number | string | null;
+		// 0 = integer-only, > 0 = allow that many decimal places.
+		scale?: number;
+		// When false, render a plain browser number input — no masking, no
+		// formatting. Default false so the component is safe to drop in
+		// anywhere; opt into grouping only where it makes sense.
+		groupDigits?: boolean;
+	};
+
+	let {
+		value = $bindable<number | string | null | undefined>(),
+		scale = 0,
+		groupDigits = false,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let inputEl: HTMLInputElement | undefined = $state();
+	let mask: ReturnType<typeof IMask> | null = null;
+	// Re-entrance guard: imask's `accept` event fires when we programmatically
+	// set unmaskedValue, which would create a sync→reflect loop with the
+	// "external value changed" effect below.
+	let applyingExternal = false;
+
+	$effect(() => {
+		if (!groupDigits) return;
+		if (!inputEl) return;
+		mask = IMask(inputEl, {
+			mask: Number,
+			thousandsSeparator: THOUSANDS,
+			radix: RADIX,
+			scale,
+			signed: true,
+			padFractionalZeros: false,
+			normalizeZeros: true,
+			// Allow the user to type either radix; imask remaps to the chosen
+			// one and ignores stray locale separators on input.
+			mapToRadix: [",", "."],
+		});
+
+		mask.on("accept", () => {
+			if (applyingExternal) return;
+			const unmasked = mask!.unmaskedValue;
+			value = unmasked === "" ? null : Number(unmasked);
+		});
+
+		applyingExternal = true;
+		mask.unmaskedValue = value == null ? "" : String(value);
+		applyingExternal = false;
+
+		return () => {
+			mask?.destroy();
+			mask = null;
+		};
+	});
+
+	// Sync external value changes back into the mask (e.g. form reset, parent
+	// clearing the value). No-op when grouping is off.
+	$effect(() => {
+		const v = value;
+		if (!mask) return;
+		const next = v == null ? "" : String(v);
+		if (mask.unmaskedValue === next) return;
+		applyingExternal = true;
+		mask.unmaskedValue = next;
+		applyingExternal = false;
+	});
+</script>
+
+{#if groupDigits}
+	<input
+		bind:this={inputEl}
+		type="text"
+		inputmode={scale > 0 ? "decimal" : "numeric"}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className,
+		)}
+		{...rest}
+	/>
+{:else}
+	<input
+		type="number"
+		step={scale > 0 ? "any" : "1"}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className,
+		)}
+		bind:value
+		{...rest}
+	/>
+{/if}

package/src/lib/components/workflowEditor.svelte

@@ -93,7 +93,7 @@
             return;
         }
 
-        const reponse = await lobb.createOne("core_workflows", workflow);
+        const reponse = await lobb.createOne("core_workflows", { data: workflow });
         const result = await reponse.json();
         const workflowEntry = result.data;
         goto(`/studio/workflows/${workflowEntry.name}`);
@@ -107,9 +107,11 @@
             );
         }
         const reponse = await lobb.updateOne("core_workflows", workflow.id, {
-            name: workflow.name,
-            event_name: workflow.event_name,
-            handler: workflow.handler,
+            data: {
+                name: workflow.name,
+                event_name: workflow.event_name,
+                handler: workflow.handler,
+            },
         });
         const result = await reponse.json();
 

package/dist/components/breadCrumbs.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import * as Breadcrumb from "./ui/breadcrumb";
-	import { mediaQueries } from "../utils";
-	import { page } from "$app/state";
-	import { goto } from "$app/navigation";
-
-	const isSmall = $derived(!mediaQueries.sm.current);
-	const pathNames = $derived(
-		page.url.pathname
-			.replace("/studio", "")
-			.split("/")
-			.filter((el: any) => el !== "")
-			.slice(0, 3),
-	);
-</script>
-
-{#if isSmall}
-	<div class="text-muted-foreground text-sm">
-		{pathNames[pathNames.length - 1] || "Home"}
-	</div>
-{:else}
-	<Breadcrumb.Root>
-		<Breadcrumb.List class="flex-nowrap">
-			<Breadcrumb.Item>
-				{#if pathNames.length === 0}
-					<Breadcrumb.Page>Home</Breadcrumb.Page>
-				{:else}
-					<Breadcrumb.Link
-						class="cursor-pointer"
-						onclick={() => goto("/studio")}
-					>
-						Home
-					</Breadcrumb.Link>
-					<Breadcrumb.Separator />
-				{/if}
-			</Breadcrumb.Item>
-			{#each pathNames as path, index}
-				{@const isLastElement = pathNames.length - 1 === index}
-				{@const currentFullPaths = pathNames
-					.slice(0, index + 1)
-					.join("/")}
-				<Breadcrumb.Item>
-					{#if isLastElement}
-						<Breadcrumb.Page>{path}</Breadcrumb.Page>
-					{:else}
-						<Breadcrumb.Link
-							class="cursor-pointer"
-							onclick={() =>
-								goto(`/studio/${currentFullPaths}`)}
-						>
-							{path}
-						</Breadcrumb.Link>
-					{/if}
-				</Breadcrumb.Item>
-				{#if !isLastElement}
-					<Breadcrumb.Separator />
-				{/if}
-			{/each}
-		</Breadcrumb.List>
-	</Breadcrumb.Root>
-{/if}

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

@@ -1,3 +0,0 @@
-declare const BreadCrumbs: import("svelte").Component<Record<string, never>, {}, "">;
-type BreadCrumbs = ReturnType<typeof BreadCrumbs>;
-export default BreadCrumbs;

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

@@ -1,61 +0,0 @@
-<script lang="ts">
-    import DataTable from "../../dataTable/dataTable.svelte";
-    import { getStudioContext } from "../../../context";
-    import { Table, Link } from "lucide-svelte";
-
-    const { ctx } = getStudioContext();
-
-    import type { Changes, ChildrenChanges } from "../utils";
-
-    interface LocalProp {
-        collectionName: string;
-        entry: any;
-        activeChanges?: Changes;
-    }
-
-    let { collectionName, entry, activeChanges }: LocalProp = $props();
-
-    const children = (ctx.meta.collections[collectionName]?.children ?? [])
-        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
-
-    // Ensure all child collection slots exist before the template renders so bind:changes works
-    $effect.pre(() => {
-        if (!activeChanges) return;
-        for (const child of children) {
-            if (!activeChanges.children[child.collection]) {
-                activeChanges.children[child.collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
-            }
-        }
-    });
-</script>
-
-{#if children.length}
-    <div class="flex flex-col gap-3 border-t p-4">
-        <div class="flex items-center gap-2">
-            <Link size="14" class="text-muted-foreground" />
-            <span class="text-sm font-medium">Sub Records</span>
-        </div>
-        {#each children as child}
-            <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
-                <DataTable
-                    collectionName={child.collection}
-                    searchParams={{ children_of: collectionName, parent_id: entry.id }}
-                    parentContext={{ collectionName, recordId: entry.id }}
-                    bind:changes={activeChanges!.children[child.collection]}
-                    showImport={false}
-                    showHeader={true}
-                    showFooter={true}
-                    showDelete={child.type === "fk" || child.type === "m2m"}
-                    tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
-                >
-                    {#snippet headerLeft()}
-                        <div class="flex items-center gap-2 px-1">
-                            <Table size="14" class="text-muted-foreground" />
-                            <span class="text-sm font-medium">{child.collection}</span>
-                        </div>
-                    {/snippet}
-                </DataTable>
-            </div>
-        {/each}
-    </div>
-{/if}

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

@@ -1,9 +0,0 @@
-import type { Changes } from "../utils";
-interface LocalProp {
-    collectionName: string;
-    entry: any;
-    activeChanges?: Changes;
-}
-declare const DetailViewChildren: import("svelte").Component<LocalProp, {}, "">;
-type DetailViewChildren = ReturnType<typeof DetailViewChildren>;
-export default DetailViewChildren;

package/dist/components/header.svelte

@@ -1,45 +0,0 @@
-<script>
-	import * as Tooltip from "./ui/tooltip";
-	import Button from "./ui/button/button.svelte";
-	import { Menu, Moon, Sun } from "lucide-svelte";
-	import BreadCrumbs from "./breadCrumbs.svelte";
-	import { toggleMode, mode } from "mode-watcher";
-	import { mediaQueries } from "../utils";
-	import { expandMiniSideBar } from "./miniSidebar.svelte";
-
-	let isSmallScreen = $derived(!mediaQueries.sm.current);
-</script>
-
-<div
-	class="flex items-center justify-between border-b border-input bg-background px-3"
->
-	<div class="flex items-center gap-4">
-		{#if isSmallScreen}
-			<Menu
-				class="h-10 text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground"
-				style="left: 0.6rem; top: 0rem;"
-				size="18"
-				onclick={() => expandMiniSideBar()}
-			/>
-		{/if}
-		<BreadCrumbs />
-	</div>
-	<div class="flex h-full items-center gap-3">
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				<Button
-					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-					variant="ghost"
-					size="icon"
-					onclick={toggleMode}
-					Icon={$mode === "light" ? Moon : Sun}
-				></Button>
-			</Tooltip.Trigger>
-			<Tooltip.Content side="bottom" sideOffset={7.5}
-				>{$mode === "light"
-					? "Night Mode"
-					: "Light Mode"}</Tooltip.Content
-			>
-		</Tooltip.Root>
-	</div>
-</div>

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

@@ -1,6 +0,0 @@
-export default Header;
-type Header = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
-};
-declare const Header: import("svelte").Component<Record<string, never>, {}, "">;

package/src/lib/components/breadCrumbs.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import * as Breadcrumb from "./ui/breadcrumb";
-	import { mediaQueries } from "../utils";
-	import { page } from "$app/state";
-	import { goto } from "$app/navigation";
-
-	const isSmall = $derived(!mediaQueries.sm.current);
-	const pathNames = $derived(
-		page.url.pathname
-			.replace("/studio", "")
-			.split("/")
-			.filter((el: any) => el !== "")
-			.slice(0, 3),
-	);
-</script>
-
-{#if isSmall}
-	<div class="text-muted-foreground text-sm">
-		{pathNames[pathNames.length - 1] || "Home"}
-	</div>
-{:else}
-	<Breadcrumb.Root>
-		<Breadcrumb.List class="flex-nowrap">
-			<Breadcrumb.Item>
-				{#if pathNames.length === 0}
-					<Breadcrumb.Page>Home</Breadcrumb.Page>
-				{:else}
-					<Breadcrumb.Link
-						class="cursor-pointer"
-						onclick={() => goto("/studio")}
-					>
-						Home
-					</Breadcrumb.Link>
-					<Breadcrumb.Separator />
-				{/if}
-			</Breadcrumb.Item>
-			{#each pathNames as path, index}
-				{@const isLastElement = pathNames.length - 1 === index}
-				{@const currentFullPaths = pathNames
-					.slice(0, index + 1)
-					.join("/")}
-				<Breadcrumb.Item>
-					{#if isLastElement}
-						<Breadcrumb.Page>{path}</Breadcrumb.Page>
-					{:else}
-						<Breadcrumb.Link
-							class="cursor-pointer"
-							onclick={() =>
-								goto(`/studio/${currentFullPaths}`)}
-						>
-							{path}
-						</Breadcrumb.Link>
-					{/if}
-				</Breadcrumb.Item>
-				{#if !isLastElement}
-					<Breadcrumb.Separator />
-				{/if}
-			{/each}
-		</Breadcrumb.List>
-	</Breadcrumb.Root>
-{/if}

package/src/lib/components/detailView/update/detailViewChildren.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-    import DataTable from "../../dataTable/dataTable.svelte";
-    import { getStudioContext } from "../../../context";
-    import { Table, Link } from "lucide-svelte";
-
-    const { ctx } = getStudioContext();
-
-    import type { Changes, ChildrenChanges } from "../utils";
-
-    interface LocalProp {
-        collectionName: string;
-        entry: any;
-        activeChanges?: Changes;
-    }
-
-    let { collectionName, entry, activeChanges }: LocalProp = $props();
-
-    const children = (ctx.meta.collections[collectionName]?.children ?? [])
-        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
-
-    // Ensure all child collection slots exist before the template renders so bind:changes works
-    $effect.pre(() => {
-        if (!activeChanges) return;
-        for (const child of children) {
-            if (!activeChanges.children[child.collection]) {
-                activeChanges.children[child.collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
-            }
-        }
-    });
-</script>
-
-{#if children.length}
-    <div class="flex flex-col gap-3 border-t p-4">
-        <div class="flex items-center gap-2">
-            <Link size="14" class="text-muted-foreground" />
-            <span class="text-sm font-medium">Sub Records</span>
-        </div>
-        {#each children as child}
-            <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
-                <DataTable
-                    collectionName={child.collection}
-                    searchParams={{ children_of: collectionName, parent_id: entry.id }}
-                    parentContext={{ collectionName, recordId: entry.id }}
-                    bind:changes={activeChanges!.children[child.collection]}
-                    showImport={false}
-                    showHeader={true}
-                    showFooter={true}
-                    showDelete={child.type === "fk" || child.type === "m2m"}
-                    tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
-                >
-                    {#snippet headerLeft()}
-                        <div class="flex items-center gap-2 px-1">
-                            <Table size="14" class="text-muted-foreground" />
-                            <span class="text-sm font-medium">{child.collection}</span>
-                        </div>
-                    {/snippet}
-                </DataTable>
-            </div>
-        {/each}
-    </div>
-{/if}

package/src/lib/components/header.svelte

@@ -1,45 +0,0 @@
-<script>
-	import * as Tooltip from "./ui/tooltip";
-	import Button from "./ui/button/button.svelte";
-	import { Menu, Moon, Sun } from "lucide-svelte";
-	import BreadCrumbs from "./breadCrumbs.svelte";
-	import { toggleMode, mode } from "mode-watcher";
-	import { mediaQueries } from "../utils";
-	import { expandMiniSideBar } from "./miniSidebar.svelte";
-
-	let isSmallScreen = $derived(!mediaQueries.sm.current);
-</script>
-
-<div
-	class="flex items-center justify-between border-b border-input bg-background px-3"
->
-	<div class="flex items-center gap-4">
-		{#if isSmallScreen}
-			<Menu
-				class="h-10 text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground"
-				style="left: 0.6rem; top: 0rem;"
-				size="18"
-				onclick={() => expandMiniSideBar()}
-			/>
-		{/if}
-		<BreadCrumbs />
-	</div>
-	<div class="flex h-full items-center gap-3">
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				<Button
-					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-					variant="ghost"
-					size="icon"
-					onclick={toggleMode}
-					Icon={$mode === "light" ? Moon : Sun}
-				></Button>
-			</Tooltip.Trigger>
-			<Tooltip.Content side="bottom" sideOffset={7.5}
-				>{$mode === "light"
-					? "Night Mode"
-					: "Light Mode"}</Tooltip.Content
-			>
-		</Tooltip.Root>
-	</div>
-</div>