@shotleybuilder/svelte-gridlite-kit 0.1.0

package/dist/components/FilterBar.svelte

@@ -0,0 +1,390 @@
+<script>import { quoteIdentifier } from "../query/builder.js";
+import FilterConditionComponent from "./FilterCondition.svelte";
+export let db;
+export let table;
+export let columns;
+export let columnConfigs = [];
+export let allowedColumns = [];
+export let conditions = [];
+export let onConditionsChange;
+export let logic = "and";
+export let onLogicChange;
+export let isExpanded = false;
+export let onExpandedChange = void 0;
+let columnValuesCache = /* @__PURE__ */ new Map();
+let numericRangeCache = /* @__PURE__ */ new Map();
+async function getColumnValues(columnName) {
+  if (!columnName || !table) return [];
+  if (columnValuesCache.has(columnName)) {
+    return columnValuesCache.get(columnName);
+  }
+  try {
+    const quotedCol = quoteIdentifier(columnName, allowedColumns);
+    const sql = `SELECT DISTINCT ${quotedCol}::TEXT AS val FROM ${quoteIdentifier(table)} WHERE ${quotedCol} IS NOT NULL ORDER BY val LIMIT 200`;
+    const result = await db.query(sql);
+    const values = result.rows.map((r) => r.val);
+    columnValuesCache.set(columnName, values);
+    return values;
+  } catch {
+    columnValuesCache.set(columnName, []);
+    return [];
+  }
+}
+async function getNumericRange(columnName) {
+  if (!columnName || !table) return null;
+  if (numericRangeCache.has(columnName)) {
+    return numericRangeCache.get(columnName);
+  }
+  const col = columns.find((c) => c.name === columnName);
+  const cfg = columnConfigs.find((c) => c.name === columnName);
+  const dataType = cfg?.dataType ?? col?.dataType;
+  if (dataType !== "number") {
+    numericRangeCache.set(columnName, null);
+    return null;
+  }
+  try {
+    const quotedCol = quoteIdentifier(columnName, allowedColumns);
+    const sql = `SELECT MIN(${quotedCol})::NUMERIC AS min_val, MAX(${quotedCol})::NUMERIC AS max_val FROM ${quoteIdentifier(table)}`;
+    const result = await db.query(sql);
+    const row = result.rows[0];
+    if (row && row.min_val != null && row.max_val != null) {
+      const range = { min: Number(row.min_val), max: Number(row.max_val) };
+      numericRangeCache.set(columnName, range);
+      return range;
+    }
+    numericRangeCache.set(columnName, null);
+    return null;
+  } catch {
+    numericRangeCache.set(columnName, null);
+    return null;
+  }
+}
+let conditionValues = /* @__PURE__ */ new Map();
+let conditionRanges = /* @__PURE__ */ new Map();
+async function loadSuggestionsForCondition(conditionId, field) {
+  if (!field) return;
+  const values = await getColumnValues(field);
+  conditionValues.set(conditionId, values);
+  conditionValues = conditionValues;
+  const range = await getNumericRange(field);
+  conditionRanges.set(conditionId, range);
+  conditionRanges = conditionRanges;
+}
+$: {
+  for (const cond of conditions) {
+    if (cond.field) {
+      const cached = conditionValues.get(cond.id);
+      if (cached === void 0) {
+        loadSuggestionsForCondition(cond.id, cond.field);
+      }
+    }
+  }
+}
+function generateId() {
+  return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function addCondition() {
+  const newCondition = {
+    id: generateId(),
+    field: "",
+    operator: "equals",
+    value: ""
+  };
+  onConditionsChange([...conditions, newCondition]);
+  setExpanded(true);
+}
+function setExpanded(value) {
+  isExpanded = value;
+  if (onExpandedChange) {
+    onExpandedChange(value);
+  }
+}
+function updateCondition(index, updated) {
+  const prev = conditions[index];
+  const newConditions = [...conditions];
+  newConditions[index] = updated;
+  onConditionsChange(newConditions);
+  if (prev.field !== updated.field && updated.field) {
+    conditionValues.delete(updated.id);
+    conditionRanges.delete(updated.id);
+    loadSuggestionsForCondition(updated.id, updated.field);
+  }
+}
+function removeCondition(index) {
+  const removed = conditions[index];
+  const newConditions = conditions.filter((_, i) => i !== index);
+  onConditionsChange(newConditions);
+  conditionValues.delete(removed.id);
+  conditionRanges.delete(removed.id);
+  if (newConditions.length === 0) {
+    setExpanded(false);
+  }
+}
+function clearAllConditions() {
+  onConditionsChange([]);
+  conditionValues.clear();
+  conditionRanges.clear();
+  conditionValues = conditionValues;
+  conditionRanges = conditionRanges;
+  setExpanded(false);
+}
+export function invalidateCaches() {
+  columnValuesCache.clear();
+  numericRangeCache.clear();
+  conditionValues.clear();
+  conditionRanges.clear();
+  conditionValues = conditionValues;
+  conditionRanges = conditionRanges;
+}
+$: hasConditions = conditions.length > 0;
+$: filterCount = conditions.filter(
+  (c) => c.field && (c.operator === "is_empty" || c.operator === "is_not_empty" || c.value !== null && c.value !== void 0 && c.value !== "")
+).length;
+</script>
+
+<div class="filter-bar">
+	<button class="filter-toggle-btn" on:click={() => setExpanded(!isExpanded)}>
+		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+			/>
+		</svg>
+		Filter
+		{#if filterCount > 0}
+			<span class="filter-badge">{filterCount}</span>
+		{/if}
+		<svg class="chevron" class:expanded={isExpanded} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	{#if isExpanded}
+		<div class="filter-panel">
+			{#if hasConditions}
+				<div class="filter-header">
+					<button class="clear-all-btn" on:click={clearAllConditions}> Clear all </button>
+				</div>
+
+				<div class="filter-conditions">
+					{#each conditions as condition, index (condition.id)}
+						<div class="condition-row">
+							{#if index === 0}
+								<span class="filter-label">Where</span>
+							{:else}
+								<select
+									class="logic-select"
+									value={logic}
+									on:change={(e) => {
+										const newLogic = e.currentTarget.value;
+										onLogicChange(newLogic === 'or' ? 'or' : 'and');
+									}}
+								>
+									<option value="and">and</option>
+									<option value="or">or</option>
+								</select>
+							{/if}
+							<div class="condition-wrapper">
+								<FilterConditionComponent
+									{condition}
+									{columns}
+									{columnConfigs}
+									columnValues={conditionValues.get(condition.id) ?? []}
+									numericRange={conditionRanges.get(condition.id) ?? null}
+									onUpdate={(updated) => updateCondition(index, updated)}
+									onRemove={() => removeCondition(index)}
+								/>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			<button class="add-condition-btn" on:click={addCondition}>
+				<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+					/>
+				</svg>
+				Add condition
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.filter-bar {
+		position: relative;
+	}
+
+	.filter-toggle-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.filter-toggle-btn:hover {
+		background: #f9fafb;
+		border-color: #9ca3af;
+	}
+
+	.filter-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 0.375rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: white;
+		background: #4f46e5;
+		border-radius: 0.75rem;
+	}
+
+	.chevron {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 0.2s;
+	}
+
+	.chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	.filter-panel {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 20;
+		min-width: 600px;
+		padding: 1rem;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+	}
+
+	.filter-header {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
+
+	.filter-label {
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		min-width: 60px;
+		padding: 0.375rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #374151;
+		text-align: left;
+		height: fit-content;
+		margin-top: 0.5rem;
+		box-sizing: border-box;
+	}
+
+	.clear-all-btn {
+		font-size: 0.75rem;
+		color: #6b7280;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.clear-all-btn:hover {
+		color: #dc2626;
+		background: #fee2e2;
+	}
+
+	.filter-conditions {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.condition-row {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+
+	.logic-select {
+		flex-shrink: 0;
+		padding: 0.375rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #6b7280;
+		text-transform: lowercase;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		min-width: 60px;
+		height: fit-content;
+		margin-top: 0.5rem;
+	}
+
+	.logic-select:hover {
+		background: #f9fafb;
+		border-color: #9ca3af;
+	}
+
+	.logic-select:focus {
+		outline: none;
+		border-color: #4f46e5;
+		box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+	}
+
+	.condition-wrapper {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.add-condition-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #4f46e5;
+		background: white;
+		border: 1px dashed #4f46e5;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.add-condition-btn:hover {
+		background: #eef2ff;
+		border-style: solid;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

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

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+/**
+     * FilterBar — Advanced filtering UI panel.
+     *
+     * PGLite-native: fetches column value suggestions via SELECT DISTINCT
+     * and numeric ranges via SELECT MIN(), MAX() — no in-memory data scanning.
+     */
+import type { FilterCondition, FilterLogic, ColumnMetadata, ColumnConfig } from '../types.js';
+import type { PGliteWithLive } from '../query/live.js';
+declare const __propDef: {
+    props: {
+        /** PGLite instance for running suggestion queries */ db: PGliteWithLive;
+        /** Table name for suggestion queries */ table: string;
+        /** Introspected column metadata */ columns: ColumnMetadata[];
+        /** Column config overrides (labels, dataType, selectOptions) */ columnConfigs?: ColumnConfig[];
+        /** Allowed column names for query safety */ allowedColumns?: string[];
+        /** Current filter conditions */ conditions?: FilterCondition[];
+        onConditionsChange: (conditions: FilterCondition[]) => void;
+        /** Filter logic (AND/OR) */ logic?: FilterLogic;
+        onLogicChange: (logic: FilterLogic) => void;
+        /** Expand/collapse state */ isExpanded?: boolean;
+        onExpandedChange?: ((expanded: boolean) => void) | undefined;
+        invalidateCaches?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FilterBarProps = typeof __propDef.props;
+export type FilterBarEvents = typeof __propDef.events;
+export type FilterBarSlots = typeof __propDef.slots;
+export default class FilterBar extends SvelteComponent<FilterBarProps, FilterBarEvents, FilterBarSlots> {
+    get invalidateCaches(): () => void;
+}
+export {};