@lobb-js/studio 0.10.0 → 0.11.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -41,6 +41,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
+    "@lobb-js/core": "^0.17.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

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}