@lobb-js/studio 0.44.0 → 0.45.0

package/dist/components/dataTable/dataTable.svelte

@@ -210,6 +210,7 @@
     });
 
     let selectedRecords = $state([]);
+    let searchTerm = $state('');
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
@@ -228,14 +229,15 @@
     const showLeftTools = $derived(!isSelectMode);
     let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
-    // requests the data from the server when the params is changed
+    // requests the data from the server when params or searchTerm changes
     $effect(() => {
-        loadData(params);
+        loadData(params, searchTerm);
     });
 
-    async function loadData(params: any) {
+    async function loadData(params: any, search: string = '') {
         loading = true;
         const paramsCopy = $state.snapshot(params);
+        if (search.trim()) paramsCopy.search = search.trim();
         const sort: TableProps["sort"] = paramsCopy.sort;
         const sortStrings: string[] = [];
         if (sort) {
@@ -417,6 +419,7 @@
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
             {excludeIds}
+            bind:searchTerm
         >
             {#snippet left()}
                 {@render headerLeft?.()}

package/dist/components/dataTable/filter.svelte

@@ -477,7 +477,12 @@
     {@const kind = getFieldKind(rule.field)}
     {@const FieldIcon = getFieldIcon(ctx, rule.field, collectionName)}
     <!-- Field picker — typeahead popover, same widget Sort uses -->
-    <Popover.Root bind:open={fieldPickerOpen[rule.id]}>
+    <Popover.Root
+        bind:open={
+            () => fieldPickerOpen[rule.id] ?? false,
+            (v) => (fieldPickerOpen[rule.id] = v)
+        }
+    >
         <Popover.Trigger
             class="inline-flex h-7 w-36 items-center justify-between gap-1.5 rounded-md border bg-muted px-2 text-xs"
         >

package/dist/components/dataTable/filterButton.svelte

@@ -64,6 +64,7 @@
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content
+		trapFocus={false}
 		class="
 			w-screen p-0
 			transition-[max-width] duration-150

package/dist/components/dataTable/header.svelte

@@ -3,7 +3,7 @@
     import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
-    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
+    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link, Search } from "lucide-svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -30,6 +30,7 @@
         loading?: boolean;
         left?: Snippet<[]>;
         excludeIds?: (string | number)[];
+        searchTerm?: string;
     }
 
     let {
@@ -45,6 +46,7 @@
         loading = false,
         left,
         excludeIds = [],
+        searchTerm = $bindable(''),
     }: Props = $props();
 
     function handleLink(record: any) {
@@ -139,9 +141,18 @@
                 bind:sort={params.sort}
                 showText={!headerIsSmall}
             />
+            <div class="relative flex items-center">
+                <Search size="13" class="absolute left-2 text-muted-foreground pointer-events-none" />
+                <input
+                    type="text"
+                    placeholder="Search..."
+                    bind:value={searchTerm}
+                    class="h-8 rounded-md border bg-muted pl-7 pr-2 text-xs outline-none focus:ring-1 focus:ring-ring w-40"
+                />
+            </div>
         {/if}
     </div>
-    <div>
+    <div class="flex items-center gap-1">
         <Button
             variant="ghost"
             size="sm"

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

@@ -14,7 +14,8 @@ interface Props {
     loading?: boolean;
     left?: Snippet<[]>;
     excludeIds?: (string | number)[];
+    searchTerm?: string;
 }
-declare const Header: import("svelte").Component<Props, {}, "selectedRecords" | "params">;
+declare const Header: import("svelte").Component<Props, {}, "selectedRecords" | "params" | "searchTerm">;
 type Header = ReturnType<typeof Header>;
 export default Header;

package/dist/components/dataTable/table.svelte

@@ -208,6 +208,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
+				min-w-0
 				bg-muted
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
@@ -276,7 +277,7 @@
 					onclick={() => {
 						select?.onSelect(entry);
 					}}
-					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
+					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip min-w-0 bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
 				>
 					{#if overrideCell}
 						{@render overrideCell(fieldValue, column, entry)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.38.0",
+    "@lobb-js/core": "^0.39.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.0.1",

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

@@ -210,6 +210,7 @@
     });
 
     let selectedRecords = $state([]);
+    let searchTerm = $state('');
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
@@ -228,14 +229,15 @@
     const showLeftTools = $derived(!isSelectMode);
     let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
-    // requests the data from the server when the params is changed
+    // requests the data from the server when params or searchTerm changes
     $effect(() => {
-        loadData(params);
+        loadData(params, searchTerm);
     });
 
-    async function loadData(params: any) {
+    async function loadData(params: any, search: string = '') {
         loading = true;
         const paramsCopy = $state.snapshot(params);
+        if (search.trim()) paramsCopy.search = search.trim();
         const sort: TableProps["sort"] = paramsCopy.sort;
         const sortStrings: string[] = [];
         if (sort) {
@@ -417,6 +419,7 @@
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
             {excludeIds}
+            bind:searchTerm
         >
             {#snippet left()}
                 {@render headerLeft?.()}

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

@@ -477,7 +477,12 @@
     {@const kind = getFieldKind(rule.field)}
     {@const FieldIcon = getFieldIcon(ctx, rule.field, collectionName)}
     <!-- Field picker — typeahead popover, same widget Sort uses -->
-    <Popover.Root bind:open={fieldPickerOpen[rule.id]}>
+    <Popover.Root
+        bind:open={
+            () => fieldPickerOpen[rule.id] ?? false,
+            (v) => (fieldPickerOpen[rule.id] = v)
+        }
+    >
         <Popover.Trigger
             class="inline-flex h-7 w-36 items-center justify-between gap-1.5 rounded-md border bg-muted px-2 text-xs"
         >

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

@@ -64,6 +64,7 @@
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content
+		trapFocus={false}
 		class="
 			w-screen p-0
 			transition-[max-width] duration-150

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

@@ -3,7 +3,7 @@
     import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
-    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
+    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link, Search } from "lucide-svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -30,6 +30,7 @@
         loading?: boolean;
         left?: Snippet<[]>;
         excludeIds?: (string | number)[];
+        searchTerm?: string;
     }
 
     let {
@@ -45,6 +46,7 @@
         loading = false,
         left,
         excludeIds = [],
+        searchTerm = $bindable(''),
     }: Props = $props();
 
     function handleLink(record: any) {
@@ -139,9 +141,18 @@
                 bind:sort={params.sort}
                 showText={!headerIsSmall}
             />
+            <div class="relative flex items-center">
+                <Search size="13" class="absolute left-2 text-muted-foreground pointer-events-none" />
+                <input
+                    type="text"
+                    placeholder="Search..."
+                    bind:value={searchTerm}
+                    class="h-8 rounded-md border bg-muted pl-7 pr-2 text-xs outline-none focus:ring-1 focus:ring-ring w-40"
+                />
+            </div>
         {/if}
     </div>
-    <div>
+    <div class="flex items-center gap-1">
         <Button
             variant="ghost"
             size="sm"

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

@@ -208,6 +208,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
+				min-w-0
 				bg-muted
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
@@ -276,7 +277,7 @@
 					onclick={() => {
 						select?.onSelect(entry);
 					}}
-					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
+					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip min-w-0 bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
 				>
 					{#if overrideCell}
 						{@render overrideCell(fieldValue, column, entry)}