@shotleybuilder/svelte-gridlite-kit 0.1.0

package/dist/components/GroupBar.svelte

@@ -0,0 +1,463 @@
+<script>export let columns;
+export let columnConfigs = [];
+export let grouping = [];
+export let onGroupingChange;
+export let isExpanded = false;
+export let onExpandedChange = void 0;
+const MAX_LEVELS = 3;
+const aggregateFunctions = [
+  { value: "count", label: "Count" },
+  { value: "sum", label: "Sum" },
+  { value: "avg", label: "Average" },
+  { value: "min", label: "Min" },
+  { value: "max", label: "Max" }
+];
+function getColumnLabel(col) {
+  const cfg = columnConfigs.find((c) => c.name === col.name);
+  return cfg?.label ?? col.name;
+}
+function setExpanded(value) {
+  isExpanded = value;
+  if (onExpandedChange) {
+    onExpandedChange(value);
+  }
+}
+function addGroup() {
+  if (grouping.length >= MAX_LEVELS) return;
+  onGroupingChange([...grouping, { column: "" }]);
+  setExpanded(true);
+}
+function updateGroupColumn(index, column) {
+  const newGrouping = [...grouping];
+  newGrouping[index] = { ...newGrouping[index], column };
+  onGroupingChange(newGrouping);
+}
+function removeGroup(index) {
+  const newGrouping = grouping.filter((_, i) => i !== index);
+  onGroupingChange(newGrouping);
+  if (newGrouping.length === 0) {
+    setExpanded(false);
+  }
+}
+function clearAllGroups() {
+  onGroupingChange([]);
+  setExpanded(false);
+}
+function addAggregation(groupIndex) {
+  const newGrouping = [...grouping];
+  const group = { ...newGrouping[groupIndex] };
+  const agg = { column: "", function: "count" };
+  group.aggregations = [...group.aggregations ?? [], agg];
+  newGrouping[groupIndex] = group;
+  onGroupingChange(newGrouping);
+}
+function updateAggregation(groupIndex, aggIndex, updates) {
+  const newGrouping = [...grouping];
+  const group = { ...newGrouping[groupIndex] };
+  const aggs = [...group.aggregations ?? []];
+  aggs[aggIndex] = { ...aggs[aggIndex], ...updates };
+  group.aggregations = aggs;
+  newGrouping[groupIndex] = group;
+  onGroupingChange(newGrouping);
+}
+function removeAggregation(groupIndex, aggIndex) {
+  const newGrouping = [...grouping];
+  const group = { ...newGrouping[groupIndex] };
+  group.aggregations = (group.aggregations ?? []).filter((_, i) => i !== aggIndex);
+  newGrouping[groupIndex] = group;
+  onGroupingChange(newGrouping);
+}
+function handleAggFunctionChange(groupIndex, aggIndex, value) {
+  const updates = {};
+  updates.function = value;
+  updateAggregation(groupIndex, aggIndex, updates);
+}
+$: numericColumns = columns.filter((col) => {
+  const cfg = columnConfigs.find((c) => c.name === col.name);
+  const dt = cfg?.dataType ?? col.dataType;
+  return dt === "number";
+});
+$: hasGroups = grouping.length > 0;
+$: validGroupCount = grouping.filter((g) => g.column !== "").length;
+$: canAddMore = grouping.length < MAX_LEVELS;
+</script>
+
+<div class="group-bar">
+	<button class="group-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="M4 6h16M4 10h16M4 14h16M4 18h16"
+			/>
+		</svg>
+		Group
+		{#if validGroupCount > 0}
+			<span class="group-badge">{validGroupCount}</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="group-panel">
+			{#if hasGroups}
+				<div class="group-header">
+					<span class="group-label">Group by</span>
+					<button class="clear-all-btn" on:click={clearAllGroups}> Clear all </button>
+				</div>
+
+				<div class="group-levels">
+					{#each grouping as group, index (index)}
+						<div class="group-level">
+							<div class="group-level-row">
+								<select
+									class="field-select"
+									value={group.column}
+									on:change={(e) => updateGroupColumn(index, e.currentTarget.value)}
+								>
+									<option value="">Select field...</option>
+									{#each columns as column}
+										<option value={column.name}>
+											{getColumnLabel(column)}
+										</option>
+									{/each}
+								</select>
+
+								<button class="remove-btn" on:click={() => removeGroup(index)} title="Remove group" type="button">
+									<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/>
+									</svg>
+								</button>
+							</div>
+
+							{#if group.column}
+								<!-- Aggregations for this group level -->
+								{#if group.aggregations && group.aggregations.length > 0}
+									<div class="aggregations">
+										{#each group.aggregations as agg, aggIndex}
+											<div class="aggregation-row">
+												<select
+													class="agg-function-select"
+													value={agg.function}
+													on:change={(e) => handleAggFunctionChange(index, aggIndex, e.currentTarget.value)}
+												>
+													{#each aggregateFunctions as fn}
+														<option value={fn.value}>{fn.label}</option>
+													{/each}
+												</select>
+
+												<select
+													class="agg-column-select"
+													value={agg.column}
+													on:change={(e) =>
+														updateAggregation(index, aggIndex, {
+															column: e.currentTarget.value
+														})}
+												>
+													<option value="">Select column...</option>
+													{#if agg.function === 'count'}
+														<option value="*">All rows (*)</option>
+													{/if}
+													{#each agg.function === 'sum' || agg.function === 'avg' ? numericColumns : columns as col}
+														<option value={col.name}>{getColumnLabel(col)}</option>
+													{/each}
+												</select>
+
+												<button
+													class="remove-btn small"
+													on:click={() => removeAggregation(index, aggIndex)}
+													title="Remove aggregation"
+													type="button"
+												>
+													<svg class="icon-sm" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M6 18L18 6M6 6l12 12"
+														/>
+													</svg>
+												</button>
+											</div>
+										{/each}
+									</div>
+								{/if}
+
+								<button
+									class="add-agg-btn"
+									on:click={() => addAggregation(index)}
+									type="button"
+								>
+									+ Add aggregation
+								</button>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			{#if canAddMore}
+				<button class="add-group-btn" on:click={addGroup}>
+					<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>
+					{hasGroups ? 'Add subgroup' : 'Add group'}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.group-bar {
+		position: relative;
+	}
+
+	.group-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;
+	}
+
+	.group-toggle-btn:hover {
+		background: #f9fafb;
+		border-color: #9ca3af;
+	}
+
+	.group-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: #059669;
+		border-radius: 0.75rem;
+	}
+
+	.chevron {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 0.2s;
+	}
+
+	.chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	.group-panel {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 20;
+		min-width: 450px;
+		padding: 1rem;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+	}
+
+	.group-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
+
+	.group-label {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: #374151;
+	}
+
+	.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;
+	}
+
+	.group-levels {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.group-level {
+		padding: 0.5rem;
+		background: #f9fafb;
+		border-radius: 0.375rem;
+	}
+
+	.group-level-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.field-select {
+		flex: 1;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		background: white;
+	}
+
+	.field-select:focus {
+		outline: none;
+		border-color: #059669;
+		box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+	}
+
+	/* Aggregation rows */
+	.aggregations {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		margin-top: 0.5rem;
+		padding-left: 1rem;
+	}
+
+	.aggregation-row {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.agg-function-select,
+	.agg-column-select {
+		padding: 0.25rem 0.5rem;
+		font-size: 0.8125rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.25rem;
+		background: white;
+	}
+
+	.agg-function-select {
+		min-width: 90px;
+	}
+
+	.agg-column-select {
+		flex: 1;
+		min-width: 120px;
+	}
+
+	.agg-function-select:focus,
+	.agg-column-select:focus {
+		outline: none;
+		border-color: #059669;
+		box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
+	}
+
+	.add-agg-btn {
+		display: inline-block;
+		margin-top: 0.375rem;
+		margin-left: 1rem;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+		color: #6b7280;
+		background: none;
+		border: none;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.15s;
+	}
+
+	.add-agg-btn:hover {
+		color: #059669;
+		background: #d1fae5;
+	}
+
+	.remove-btn {
+		flex-shrink: 0;
+		padding: 0.375rem;
+		background: none;
+		border: none;
+		color: #6b7280;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.remove-btn:hover {
+		background: #fee2e2;
+		color: #dc2626;
+	}
+
+	.remove-btn.small {
+		padding: 0.25rem;
+	}
+
+	.add-group-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #059669;
+		background: white;
+		border: 1px dashed #059669;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.add-group-btn:hover {
+		background: #d1fae5;
+		border-style: solid;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.icon-sm {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+/**
+     * GroupBar — Multi-level grouping controls with aggregation support.
+     *
+     * Emits GroupConfig[] which maps to GROUP BY with SUM/AVG/COUNT/MIN/MAX
+     * in the query builder. Up to 3 nested group levels.
+     *
+     * PGLite-native: uses GroupConfig with AggregationConfig for SQL aggregates,
+     * unlike svelte-table-kit which used simple string[] grouping.
+     */
+import type { GroupConfig, ColumnMetadata, ColumnConfig } from '../types.js';
+declare const __propDef: {
+    props: {
+        columns: ColumnMetadata[];
+        columnConfigs?: ColumnConfig[];
+        grouping?: GroupConfig[];
+        onGroupingChange: (grouping: GroupConfig[]) => void;
+        isExpanded?: boolean;
+        onExpandedChange?: ((expanded: boolean) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GroupBarProps = typeof __propDef.props;
+export type GroupBarEvents = typeof __propDef.events;
+export type GroupBarSlots = typeof __propDef.slots;
+export default class GroupBar extends SvelteComponent<GroupBarProps, GroupBarEvents, GroupBarSlots> {
+}
+export {};

package/dist/components/RowDetailModal.svelte

@@ -0,0 +1,213 @@
+<script>import { onMount, onDestroy } from "svelte";
+export let isOpen = false;
+export let hasPrev = false;
+export let hasNext = false;
+export let onClose;
+export let onPrev = void 0;
+export let onNext = void 0;
+let modalElement = null;
+let previouslyFocused = null;
+let mounted = false;
+function handleClose() {
+  onClose();
+}
+function handlePrev() {
+  if (hasPrev && onPrev) onPrev();
+}
+function handleNext() {
+  if (hasNext && onNext) onNext();
+}
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    onClose();
+  } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+    event.preventDefault();
+    if (hasPrev && onPrev) onPrev();
+  } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+    event.preventDefault();
+    if (hasNext && onNext) onNext();
+  }
+}
+function handleBackdropClick(event) {
+  if (event.target === event.currentTarget) {
+    onClose();
+  }
+}
+$: if (mounted) {
+  if (isOpen) {
+    previouslyFocused = document.activeElement;
+    document.addEventListener("keydown", handleKeydown);
+    document.body.style.overflow = "hidden";
+    requestAnimationFrame(() => {
+      modalElement?.focus();
+    });
+  } else {
+    document.removeEventListener("keydown", handleKeydown);
+    document.body.style.overflow = "";
+    if (previouslyFocused) {
+      previouslyFocused.focus();
+      previouslyFocused = null;
+    }
+  }
+}
+onMount(() => {
+  mounted = true;
+});
+onDestroy(() => {
+  if (mounted) {
+    document.removeEventListener("keydown", handleKeydown);
+    document.body.style.overflow = "";
+  }
+});
+</script>
+
+{#if isOpen}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="row-detail-backdrop" on:click={handleBackdropClick}>
+		<div
+			class="row-detail-modal"
+			bind:this={modalElement}
+			role="dialog"
+			aria-modal="true"
+			tabindex="-1"
+		>
+			<div class="row-detail-header">
+				<div class="row-detail-nav">
+					<button
+						class="nav-btn"
+						disabled={!hasPrev}
+						on:click={handlePrev}
+						aria-label="Previous row"
+						title="Previous row"
+					>
+						<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</button>
+					<button
+						class="nav-btn"
+						disabled={!hasNext}
+						on:click={handleNext}
+						aria-label="Next row"
+						title="Next row"
+					>
+						<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+				</div>
+				<button class="close-btn" on:click={handleClose} aria-label="Close" title="Close">
+					<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<div class="row-detail-body">
+				<slot />
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.row-detail-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 1000;
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.row-detail-modal {
+		position: relative;
+		background: white;
+		border-radius: 0.75rem;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+		max-width: 48rem;
+		width: calc(100% - 2rem);
+		max-height: 80vh;
+		display: flex;
+		flex-direction: column;
+		outline: none;
+	}
+
+	.row-detail-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid #e5e7eb;
+		flex-shrink: 0;
+	}
+
+	.row-detail-nav {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.nav-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.375rem;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		color: #374151;
+		transition: background 0.15s;
+	}
+
+	.nav-btn:hover:not(:disabled) {
+		background: #f9fafb;
+	}
+
+	.nav-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.close-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.375rem;
+		background: none;
+		border: none;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		color: #6b7280;
+		transition: all 0.15s;
+	}
+
+	.close-btn:hover {
+		background: #f3f4f6;
+		color: #374151;
+	}
+
+	.row-detail-body {
+		padding: 1.5rem;
+		overflow-y: auto;
+		flex: 1;
+	}
+</style>