@lobb-js/studio 0.44.1 → 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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.38.1",
+    "@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/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"