@lobb-js/studio 0.39.0 → 0.41.0

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

@@ -1,7 +1,8 @@
 interface Props {
     filter: Record<string, any>;
     collectionName: string;
+    isEmpty?: boolean;
 }
-declare const Filter: import("svelte").Component<Props, {}, "filter">;
+declare const Filter: import("svelte").Component<Props, {}, "filter" | "isEmpty">;
 type Filter = ReturnType<typeof Filter>;
 export default Filter;

package/dist/components/dataTable/filterButton.svelte

@@ -16,13 +16,25 @@
 		collectionName,
 	}: Props = $props();
 
-	// Count rules, not top-level fields: a single field with two
-	// operators ({age: {$gte, $lte}}) is two rules, not one. Unmanaged
-	// $and / $or carriers count as one rule each (legacy filter shape).
-	function countRules(f: Record<string, any>): number {
+	// Tracks whether the filter has any rules applied. Filter pushes
+	// this back up so we can shrink the popover when empty — the
+	// loaded width feels hollow against the empty-state icon.
+	let filterIsEmpty = $state(true);
+
+	// Count rules across the whole filter tree. A single field with two
+	// operators ({age: {$gte, $lte}}) is two rules. Nested $and / $or
+	// arrays (groups) recurse into their children so a group with three
+	// rules contributes three, not one.
+	function countRules(f: any): number {
+		if (f == null || typeof f !== "object") return 0;
 		let n = 0;
-		for (const [key, value] of Object.entries(f ?? {})) {
-			if (key.startsWith("$")) { n += 1; continue; }
+		for (const [key, value] of Object.entries(f)) {
+			if (key === "$and" || key === "$or") {
+				if (Array.isArray(value)) {
+					for (const child of value) n += countRules(child);
+				}
+				continue;
+			}
 			if (value && typeof value === "object" && !Array.isArray(value)) {
 				n += Object.keys(value).length;
 			} else {
@@ -51,7 +63,13 @@
 			{/if}
 		{/if}
 	</Popover.Trigger>
-	<Popover.Content class="w-screen max-w-[36rem] p-0">
-		<Filter bind:filter {collectionName} />
+	<Popover.Content
+		class="
+			w-screen p-0
+			transition-[max-width] duration-150
+			{filterIsEmpty ? 'max-w-xs' : 'max-w-[36rem]'}
+		"
+	>
+		<Filter bind:filter {collectionName} bind:isEmpty={filterIsEmpty} />
 	</Popover.Content>
 </Popover.Root>

package/dist/components/dataTable/sort.svelte

@@ -4,7 +4,7 @@
     import * as Popover from "../ui/popover/index.js";
     import * as Select from "../ui/select/index.js";
     import { GripVertical, Plus, X } from "lucide-svelte";
-    import Button, { buttonVariants } from "../ui/button/button.svelte";
+    import Button from "../ui/button/button.svelte";
     import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
     import { dndzone } from "svelte-dnd-action";
@@ -205,17 +205,13 @@
         </div>
     {/if}
 </div>
-<div class="flex justify-between border-t p-2">
+<div class="flex justify-between px-3 pb-3">
     {#if getFieldNames().length}
         <Popover.Root bind:open={popoverOpen}>
             <Popover.Trigger
-                class={buttonVariants({
-                    variant: "ghost",
-                    size: "sm",
-                    class: "text-muted-foreground",
-                })}
+                class="inline-flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
             >
-                <Plus />
+                <Plus size="14" />
                 Add a sort rule
             </Popover.Trigger>
             <Popover.Content class="w-64 p-2">
@@ -231,7 +227,7 @@
             </Popover.Content>
         </Popover.Root>
     {:else}
-        <div class="flex items-center text-xs text-muted-foreground">
+        <div class="px-2 py-1 text-xs text-muted-foreground">
             All columns have been added
         </div>
     {/if}

package/dist/components/dataTable/sortButton.svelte

@@ -22,7 +22,6 @@
 
 	function pick(fieldName: string) {
 		sort = { ...sort, [fieldName]: "asc" };
-		popoverOpen = false;
 	}
 </script>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "type": "module",
   "publishConfig": {
     "access": "public"