@lobb-js/studio 0.37.1 → 0.39.0

package/dist/actions.d.ts

@@ -19,6 +19,7 @@ export interface OpenDataTablePopupProps {
     title?: string;
     showHeader?: boolean;
     showFooter?: boolean;
+    showFilter?: boolean;
     tabs?: CollectionTab[];
     view?: {
         id: string;

package/dist/components/dataTable/dataTable.svelte

@@ -44,6 +44,7 @@
         showImport?: boolean;
         showDelete?: boolean;
         showEdit?: boolean;
+        showFilter?: boolean;
         onDataLoad?: (total: number) => void;
         tableProps?: Partial<TableProps>;
         tabs?: CollectionTab[];
@@ -63,6 +64,7 @@
         showImport = true,
         showDelete = false,
         showEdit = true,
+        showFilter = true,
         onDataLoad,
         tableProps,
         tabs,
@@ -299,6 +301,7 @@
             {collectionName}
             bind:selectedRecords
             {showImport}
+            {showFilter}
             {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}

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

@@ -18,6 +18,7 @@ interface Props {
     showImport?: boolean;
     showDelete?: boolean;
     showEdit?: boolean;
+    showFilter?: boolean;
     onDataLoad?: (total: number) => void;
     tableProps?: Partial<TableProps>;
     tabs?: CollectionTab[];

package/dist/components/dataTable/fieldPicker.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    // Typeahead field picker. Renders inside a parent-owned <Popover.Content>
+    // so the parent controls open/close. Used by SortButton's fast-path
+    // picker and by Sort's "add a rule" popover.
+    import { getStudioContext } from "../../context";
+    import { getFieldIcon } from "./utils";
+
+    interface Props {
+        collectionName: string;
+        excludeFields?: string[];
+        placeholder?: string;
+        onPick: (fieldName: string) => void;
+    }
+
+    let {
+        collectionName,
+        excludeFields = [],
+        placeholder = "Pick a field…",
+        onPick,
+    }: Props = $props();
+
+    const { ctx } = getStudioContext();
+
+    let search = $state("");
+
+    const allFields = $derived(
+        Object.keys(ctx.meta.collections[collectionName].fields).filter(
+            (f) => !excludeFields.includes(f),
+        ),
+    );
+    const filteredFields = $derived(
+        search
+            ? allFields.filter((f) =>
+                  f.toLowerCase().includes(search.toLowerCase()),
+              )
+            : allFields,
+    );
+</script>
+
+<input
+    {placeholder}
+    bind:value={search}
+    class="w-full rounded-md border bg-muted px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+/>
+<div class="mt-2 max-h-60 overflow-auto">
+    {#each filteredFields as fieldName}
+        {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
+        <button
+            type="button"
+            onclick={() => onPick(fieldName)}
+            class="flex w-full items-center gap-2 rounded-md p-2 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+            <FieldIcon size="14" />
+            <span>{fieldName}</span>
+        </button>
+    {:else}
+        <div class="p-2 text-center text-xs text-muted-foreground">
+            No matching fields
+        </div>
+    {/each}
+</div>

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

@@ -0,0 +1,9 @@
+interface Props {
+    collectionName: string;
+    excludeFields?: string[];
+    placeholder?: string;
+    onPick: (fieldName: string) => void;
+}
+declare const FieldPicker: import("svelte").Component<Props, {}, "">;
+type FieldPicker = ReturnType<typeof FieldPicker>;
+export default FieldPicker;