@lobb-js/studio 0.10.0 → 0.11.1

package/dist/components/dataTable/enumBadge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { EnumOption } from "@lobb-js/core";
+
+    interface Props {
+        value: any;
+        enum: EnumOption[] | string[];
+    }
+
+    const { value, enum: enumOptions }: Props = $props();
+
+    const levelClasses: Record<string, string> = {
+        success: "bg-green-100 text-green-700 border-green-200",
+        warning: "bg-yellow-100 text-yellow-700 border-yellow-300",
+        danger: "bg-red-100 text-red-700 border-red-200",
+        info: "bg-blue-100 text-blue-700 border-blue-200",
+        neutral: "bg-gray-100 text-gray-600 border-gray-200",
+        muted: "bg-gray-50 text-gray-400 border-gray-100",
+    };
+
+    const normalizedOptions = $derived(
+        (enumOptions as Array<string | EnumOption>).map((e) =>
+            typeof e === "string" ? { value: e, level: "neutral" as const } : e,
+        ),
+    );
+
+    const enumOption = $derived(normalizedOptions.find((e) => e.value === value));
+</script>
+
+{#if enumOption}
+    <span class="px-2 py-0.5 rounded-full text-xs font-medium border {levelClasses[enumOption.level]}">
+        {value}
+    </span>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { EnumOption } from "@lobb-js/core";
+interface Props {
+    value: any;
+    enum: EnumOption[] | string[];
+}
+declare const EnumBadge: import("svelte").Component<Props, {}, "">;
+type EnumBadge = ReturnType<typeof EnumBadge>;
+export default EnumBadge;

package/dist/components/dataTable/fieldCell.svelte

@@ -3,6 +3,7 @@
     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 { getStudioContext } from "../../context";
 
@@ -66,6 +67,8 @@
     {:else}
         <div class="text-muted-foreground">PARENT ID</div>
     {/if}
+{:else if field?.enum}
+    <EnumBadge {value} enum={field.enum} />
 {:else if field.type === "datetime"}
     {@const date = new Date(value).toLocaleDateString()}
     {@const time = new Date(value).toLocaleTimeString()}

package/dist/components/detailView/fieldInput.svelte

@@ -7,6 +7,8 @@
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
 	import * as Select from "../../components/ui/select/index";
+	import EnumBadge from "../dataTable/enumBadge.svelte";
+	import type { EnumOption } from "@lobb-js/core";
 	import Textarea from "../ui/textarea/textarea.svelte";
 	import ForeingKeyInput from "../foreingKeyInput.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
@@ -91,6 +93,38 @@
 					{destructive}
 				/>
 			</ExtensionsComponents>
+		{:else if field.type === "string" && field.enum}
+			{@const rawEnum = field.enum as (string | EnumOption)[]}
+			{@const enumOptions = rawEnum.map((e): EnumOption => typeof e === "string" ? { value: e, level: "neutral" } : e)}
+			<Select.Root
+				type="single"
+				onValueChange={(newValue) => {
+					value = newValue;
+				}}
+			>
+				<Select.Trigger
+					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+					class="
+						h-9 w-full bg-muted/30 pr-8
+						{destructive ? 'border-destructive bg-destructive/10' : ''}
+					"
+				>
+					{#if value}
+						<EnumBadge {value} enum={enumOptions} />
+					{:else}
+						NULL
+					{/if}
+				</Select.Trigger>
+				<Select.Content>
+					<Select.Group>
+						{#each enumOptions as option}
+							<Select.Item value={option.value} label={option.value}>
+								<EnumBadge value={option.value} enum={enumOptions} />
+							</Select.Item>
+						{/each}
+					</Select.Group>
+				</Select.Content>
+			</Select.Root>
 		{:else if field.type === "string"}
 			<!-- if the string has a validator of type enum -->
 			{#if field.validators && field.validators.enum}

package/dist/components/drawer.svelte

@@ -2,6 +2,7 @@
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
     import { fade, fly } from "svelte/transition";
+    import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
@@ -11,18 +12,20 @@
     let { onHide, children }: Props = $props();
 </script>
 
-<button
-    transition:fade={{ duration: 250 }}
-    onclick={() => onHide?.()}
-    class="backgroundDrawerButton fixed left-0 top-0 z-30 h-screen w-screen bg-background opacity-50 cursor-default"
-    aria-label="background used to hide the background"
-></button>
+<Portal target="body">
+    <button
+        transition:fade={{ duration: 250 }}
+        onclick={() => onHide?.()}
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        aria-label="background used to hide the background"
+    ></button>
 
-<!-- the drawer -->
-<div
-    transition:fly={{ x: "100%", duration: 250 }}
-    class="fixed right-0 top-0 z-30 flex h-full w-full flex-col border-l bg-background"
-    style="max-width: {calculateDrawerWidth()}px;"
->
-    {@render children?.()}
-</div>
+    <!-- the drawer -->
+    <div
+        transition:fly={{ x: "100%", duration: 250 }}
+        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
+        style="max-width: {calculateDrawerWidth()}px;"
+    >
+        {@render children?.()}
+    </div>
+</Portal>

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.10.0",
+  "license": "UNLICENSED",
+  "version": "0.11.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -41,6 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
+    "@lobb-js/core": "^0.18.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
@@ -106,6 +108,7 @@
     "mode-watcher": "^0.5.1",
     "mustache": "^4.2.0",
     "qs": "^6.14.1",
+    "svelte-portal": "^2.2.1",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2"

package/src/lib/components/dataTable/enumBadge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { EnumOption } from "@lobb-js/core";
+
+    interface Props {
+        value: any;
+        enum: EnumOption[] | string[];
+    }
+
+    const { value, enum: enumOptions }: Props = $props();
+
+    const levelClasses: Record<string, string> = {
+        success: "bg-green-100 text-green-700 border-green-200",
+        warning: "bg-yellow-100 text-yellow-700 border-yellow-300",
+        danger: "bg-red-100 text-red-700 border-red-200",
+        info: "bg-blue-100 text-blue-700 border-blue-200",
+        neutral: "bg-gray-100 text-gray-600 border-gray-200",
+        muted: "bg-gray-50 text-gray-400 border-gray-100",
+    };
+
+    const normalizedOptions = $derived(
+        (enumOptions as Array<string | EnumOption>).map((e) =>
+            typeof e === "string" ? { value: e, level: "neutral" as const } : e,
+        ),
+    );
+
+    const enumOption = $derived(normalizedOptions.find((e) => e.value === value));
+</script>
+
+{#if enumOption}
+    <span class="px-2 py-0.5 rounded-full text-xs font-medium border {levelClasses[enumOption.level]}">
+        {value}
+    </span>
+{/if}

package/src/lib/components/dataTable/fieldCell.svelte

@@ -3,6 +3,7 @@
     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 { getStudioContext } from "../../context";
 
@@ -66,6 +67,8 @@
     {:else}
         <div class="text-muted-foreground">PARENT ID</div>
     {/if}
+{:else if field?.enum}
+    <EnumBadge {value} enum={field.enum} />
 {:else if field.type === "datetime"}
     {@const date = new Date(value).toLocaleDateString()}
     {@const time = new Date(value).toLocaleTimeString()}

package/src/lib/components/detailView/fieldInput.svelte

@@ -7,6 +7,8 @@
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
 	import * as Select from "../../components/ui/select/index";
+	import EnumBadge from "../dataTable/enumBadge.svelte";
+	import type { EnumOption } from "@lobb-js/core";
 	import Textarea from "../ui/textarea/textarea.svelte";
 	import ForeingKeyInput from "../foreingKeyInput.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
@@ -91,6 +93,38 @@
 					{destructive}
 				/>
 			</ExtensionsComponents>
+		{:else if field.type === "string" && field.enum}
+			{@const rawEnum = field.enum as (string | EnumOption)[]}
+			{@const enumOptions = rawEnum.map((e): EnumOption => typeof e === "string" ? { value: e, level: "neutral" } : e)}
+			<Select.Root
+				type="single"
+				onValueChange={(newValue) => {
+					value = newValue;
+				}}
+			>
+				<Select.Trigger
+					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+					class="
+						h-9 w-full bg-muted/30 pr-8
+						{destructive ? 'border-destructive bg-destructive/10' : ''}
+					"
+				>
+					{#if value}
+						<EnumBadge {value} enum={enumOptions} />
+					{:else}
+						NULL
+					{/if}
+				</Select.Trigger>
+				<Select.Content>
+					<Select.Group>
+						{#each enumOptions as option}
+							<Select.Item value={option.value} label={option.value}>
+								<EnumBadge value={option.value} enum={enumOptions} />
+							</Select.Item>
+						{/each}
+					</Select.Group>
+				</Select.Content>
+			</Select.Root>
 		{:else if field.type === "string"}
 			<!-- if the string has a validator of type enum -->
 			{#if field.validators && field.validators.enum}

package/src/lib/components/drawer.svelte

@@ -2,6 +2,7 @@
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
     import { fade, fly } from "svelte/transition";
+    import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
@@ -11,18 +12,20 @@
     let { onHide, children }: Props = $props();
 </script>
 
-<button
-    transition:fade={{ duration: 250 }}
-    onclick={() => onHide?.()}
-    class="backgroundDrawerButton fixed left-0 top-0 z-30 h-screen w-screen bg-background opacity-50 cursor-default"
-    aria-label="background used to hide the background"
-></button>
+<Portal target="body">
+    <button
+        transition:fade={{ duration: 250 }}
+        onclick={() => onHide?.()}
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        aria-label="background used to hide the background"
+    ></button>
 
-<!-- the drawer -->
-<div
-    transition:fly={{ x: "100%", duration: 250 }}
-    class="fixed right-0 top-0 z-30 flex h-full w-full flex-col border-l bg-background"
-    style="max-width: {calculateDrawerWidth()}px;"
->
-    {@render children?.()}
-</div>
+    <!-- the drawer -->
+    <div
+        transition:fly={{ x: "100%", duration: 250 }}
+        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
+        style="max-width: {calculateDrawerWidth()}px;"
+    >
+        {@render children?.()}
+    </div>
+</Portal>