@shotleybuilder/svelte-gridlite-kit 0.1.0

package/dist/GridLite.svelte.d.ts

@@ -0,0 +1,42 @@
+import { SvelteComponent } from "svelte";
+import type { GridConfig, GridFeatures, GridState, FilterCondition, FilterLogic, SortConfig, GroupConfig, ClassNameMap, RowHeight, ColumnSpacing, ToolbarLayout } from './types.js';
+import { type PGliteWithLive } from './query/live.js';
+declare const __propDef: {
+    props: {
+        /** PGLite instance with the live extension loaded */ db: PGliteWithLive;
+        /** Table name to query (mutually exclusive with `query`) */ table?: string | undefined;
+        /** Raw SQL query (mutually exclusive with `table`) */ query?: string | undefined;
+        /** Grid configuration */ config?: GridConfig | undefined;
+        /** Feature flags */ features?: GridFeatures;
+        /** Custom CSS class names */ classNames?: Partial<ClassNameMap>;
+        /** Row height variant */ rowHeight?: RowHeight;
+        /** Column spacing variant */ columnSpacing?: ColumnSpacing;
+        /** Toolbar layout preset */ toolbarLayout?: ToolbarLayout;
+        /** Row click callback */ onRowClick?: ((row: Record<string, unknown>) => void) | undefined;
+        /** State change callback */ onStateChange?: ((state: GridState) => void) | undefined;
+        setFilters?: (newFilters: FilterCondition[], logic?: FilterLogic) => void;
+        setSorting?: (newSorting: SortConfig[]) => void;
+        setGrouping?: (newGrouping: GroupConfig[]) => void;
+        setPage?: (newPage: number) => void;
+        setPageSize?: (newPageSize: number) => void;
+        setGlobalFilter?: (search: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GridLiteProps = typeof __propDef.props;
+export type GridLiteEvents = typeof __propDef.events;
+export type GridLiteSlots = typeof __propDef.slots;
+export default class GridLite extends SvelteComponent<GridLiteProps, GridLiteEvents, GridLiteSlots> {
+    get setFilters(): (newFilters: FilterCondition[], logic?: FilterLogic) => void;
+    get setSorting(): (newSorting: SortConfig[]) => void;
+    get setGrouping(): (newGrouping: GroupConfig[]) => void;
+    get setPage(): (newPage: number) => void;
+    get setPageSize(): (newPageSize: number) => void;
+    get setGlobalFilter(): (search: string) => void;
+}
+export {};

package/dist/components/CellContextMenu.svelte

@@ -0,0 +1,209 @@
+<script>import { onMount } from "svelte";
+export let x;
+export let y;
+export let value;
+export let columnName;
+export let columnLabel;
+export let isNumeric = false;
+export let onFilterEquals;
+export let onFilterNotEquals;
+export let onFilterGreaterThan = void 0;
+export let onFilterLessThan = void 0;
+export let onClose;
+let menuRef;
+$: displayValue = (() => {
+  const str = String(value ?? "");
+  return str.length > 30 ? str.substring(0, 27) + "..." : str;
+})();
+$: adjustedPosition = (() => {
+  let adjustedX = x;
+  let adjustedY = y;
+  if (typeof window !== "undefined") {
+    const menuWidth = 220;
+    const menuHeight = isNumeric ? 180 : 100;
+    if (x + menuWidth > window.innerWidth) {
+      adjustedX = window.innerWidth - menuWidth - 10;
+    }
+    if (y + menuHeight > window.innerHeight) {
+      adjustedY = window.innerHeight - menuHeight - 10;
+    }
+  }
+  return { x: adjustedX, y: adjustedY };
+})();
+function handleFilterEquals() {
+  onFilterEquals(columnName, value);
+  onClose();
+}
+function handleFilterNotEquals() {
+  onFilterNotEquals(columnName, value);
+  onClose();
+}
+function handleFilterGreaterThan() {
+  onFilterGreaterThan?.(columnName, value);
+  onClose();
+}
+function handleFilterLessThan() {
+  onFilterLessThan?.(columnName, value);
+  onClose();
+}
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    onClose();
+  }
+}
+function handleClickOutside(event) {
+  if (menuRef && !menuRef.contains(event.target)) {
+    onClose();
+  }
+}
+onMount(() => {
+  document.addEventListener("click", handleClickOutside);
+  document.addEventListener("keydown", handleKeydown);
+  menuRef?.focus();
+  return () => {
+    document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeydown);
+  };
+});
+</script>
+
+<div
+	bind:this={menuRef}
+	class="cell-context-menu"
+	style="top: {adjustedPosition.y}px; left: {adjustedPosition.x}px;"
+	role="menu"
+	tabindex="-1"
+>
+	<div class="menu-header">
+		<span class="column-name">{columnLabel}</span>
+	</div>
+
+	<button class="menu-item" on:click={handleFilterEquals} role="menuitem">
+		<svg class="menu-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>
+		<span>Filter by "<strong>{displayValue}</strong>"</span>
+	</button>
+
+	<button class="menu-item" on:click={handleFilterNotEquals} role="menuitem">
+		<svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+			/>
+		</svg>
+		<span>Exclude "<strong>{displayValue}</strong>"</span>
+	</button>
+
+	{#if isNumeric}
+		<div class="menu-divider"></div>
+
+		<button class="menu-item" on:click={handleFilterGreaterThan} role="menuitem">
+			<svg class="menu-icon" 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>
+			<span>Greater than <strong>{displayValue}</strong></span>
+		</button>
+
+		<button class="menu-item" on:click={handleFilterLessThan} role="menuitem">
+			<svg class="menu-icon" 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>
+			<span>Less than <strong>{displayValue}</strong></span>
+		</button>
+	{/if}
+</div>
+
+<style>
+	.cell-context-menu {
+		position: fixed;
+		z-index: 1000;
+		min-width: 200px;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		padding: 0.25rem 0;
+		outline: none;
+	}
+
+	.menu-header {
+		padding: 0.5rem 0.75rem;
+		border-bottom: 1px solid #e5e7eb;
+		margin-bottom: 0.25rem;
+	}
+
+	.column-name {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+	}
+
+	.menu-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		text-align: left;
+		background: none;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.1s;
+	}
+
+	.menu-item:hover {
+		background: #f3f4f6;
+	}
+
+	.menu-item:focus {
+		outline: none;
+		background: #e5e7eb;
+	}
+
+	.menu-item span {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.menu-item strong {
+		color: #1f2937;
+	}
+
+	.menu-icon {
+		width: 1rem;
+		height: 1rem;
+		color: #6b7280;
+		flex-shrink: 0;
+	}
+
+	.menu-divider {
+		height: 1px;
+		background: #e5e7eb;
+		margin: 0.25rem 0;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        x: number;
+        y: number;
+        value: unknown;
+        columnName: string;
+        columnLabel: string;
+        isNumeric?: boolean;
+        onFilterEquals: (columnName: string, value: unknown) => void;
+        onFilterNotEquals: (columnName: string, value: unknown) => void;
+        onFilterGreaterThan?: ((columnName: string, value: unknown) => void) | undefined;
+        onFilterLessThan?: ((columnName: string, value: unknown) => void) | undefined;
+        onClose: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CellContextMenuProps = typeof __propDef.props;
+export type CellContextMenuEvents = typeof __propDef.events;
+export type CellContextMenuSlots = typeof __propDef.slots;
+export default class CellContextMenu extends SvelteComponent<CellContextMenuProps, CellContextMenuEvents, CellContextMenuSlots> {
+}
+export {};

package/dist/components/ColumnMenu.svelte

@@ -0,0 +1,234 @@
+<script>import { onDestroy } from "svelte";
+export let columnName;
+export let isOpen = false;
+export let sorting = [];
+export let canSort = true;
+export let canFilter = true;
+export let canGroup = true;
+export let onSort;
+export let onFilter;
+export let onGroup;
+export let onHide;
+export let onClose;
+let menuElement;
+$: currentSort = (() => {
+  const s = sorting.find((s2) => s2.column === columnName);
+  return s?.direction ?? null;
+})();
+function handleSortAsc() {
+  onSort(columnName, "asc");
+  onClose();
+}
+function handleSortDesc() {
+  onSort(columnName, "desc");
+  onClose();
+}
+function handleFilter() {
+  onFilter(columnName);
+  onClose();
+}
+function handleGroup() {
+  onGroup(columnName);
+  onClose();
+}
+function handleHideColumn() {
+  onHide(columnName);
+  onClose();
+}
+function handleClickOutside(event) {
+  if (menuElement && !menuElement.contains(event.target)) {
+    onClose();
+  }
+}
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    onClose();
+  }
+}
+$: if (typeof document !== "undefined") {
+  if (isOpen) {
+    setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleKeydown);
+    }, 0);
+  } else {
+    document.removeEventListener("mousedown", handleClickOutside);
+    document.removeEventListener("keydown", handleKeydown);
+  }
+}
+onDestroy(() => {
+  if (typeof document !== "undefined") {
+    document.removeEventListener("mousedown", handleClickOutside);
+    document.removeEventListener("keydown", handleKeydown);
+  }
+});
+</script>
+
+{#if isOpen}
+	<div class="column-menu" bind:this={menuElement}>
+		{#if canSort}
+			<button
+				class="menu-item"
+				class:active={currentSort === 'asc'}
+				on:click={handleSortAsc}
+			>
+				<svg class="menu-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+					<path
+						d="M8 12V4M8 4L5 7M8 4L11 7"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Sort A → Z</span>
+				{#if currentSort === 'asc'}
+					<span class="check-icon">✓</span>
+				{/if}
+			</button>
+
+			<button
+				class="menu-item"
+				class:active={currentSort === 'desc'}
+				on:click={handleSortDesc}
+			>
+				<svg class="menu-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+					<path
+						d="M8 4V12M8 12L11 9M8 12L5 9"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Sort Z → A</span>
+				{#if currentSort === 'desc'}
+					<span class="check-icon">✓</span>
+				{/if}
+			</button>
+
+			<div class="menu-divider"></div>
+		{/if}
+
+		{#if canFilter}
+			<button class="menu-item" on:click={handleFilter}>
+				<svg class="menu-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+					<path
+						d="M2 3h12M4 6h8M6 9h4M7 12h2"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Filter by this field</span>
+			</button>
+
+			<div class="menu-divider"></div>
+		{/if}
+
+		{#if canGroup}
+			<button class="menu-item" on:click={handleGroup}>
+				<svg class="menu-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+					<path
+						d="M2 4h12M4 8h8M6 12h4"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Group by this field</span>
+			</button>
+
+			<div class="menu-divider"></div>
+		{/if}
+
+		<button class="menu-item" on:click={handleHideColumn}>
+			<svg class="menu-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+				<path
+					d="M2 8C2 8 4.5 3 8 3C11.5 3 14 8 14 8C14 8 11.5 13 8 13C4.5 13 2 8 2 8Z"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+				<circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.5" />
+				<line x1="2" y1="2" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+			<span>Hide field</span>
+		</button>
+	</div>
+{/if}
+
+<style>
+	.column-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: 0.25rem;
+		min-width: 12rem;
+		background: white;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 0.375rem;
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+		padding: 0.25rem;
+		z-index: 50;
+	}
+
+	.menu-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: none;
+		background: transparent;
+		text-align: left;
+		font-size: 0.875rem;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: background-color 0.15s;
+		color: #374151;
+		position: relative;
+	}
+
+	.menu-item:hover {
+		background-color: #f3f4f6;
+	}
+
+	.menu-item.active {
+		background-color: #eff6ff;
+		color: #1e40af;
+	}
+
+	.menu-item.active:hover {
+		background-color: #dbeafe;
+	}
+
+	.menu-icon {
+		flex-shrink: 0;
+		color: #6b7280;
+	}
+
+	.menu-item:hover .menu-icon {
+		color: #374151;
+	}
+
+	.menu-item.active .menu-icon {
+		color: #3b82f6;
+	}
+
+	.check-icon {
+		margin-left: auto;
+		color: #3b82f6;
+		font-weight: bold;
+		font-size: 1rem;
+	}
+
+	.menu-divider {
+		height: 1px;
+		background-color: #e5e7eb;
+		margin: 0.25rem 0;
+	}
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { SortConfig } from '../types.js';
+declare const __propDef: {
+    props: {
+        columnName: string;
+        isOpen?: boolean;
+        sorting?: SortConfig[];
+        canSort?: boolean;
+        canFilter?: boolean;
+        canGroup?: boolean;
+        onSort: (columnName: string, direction: "asc" | "desc") => void;
+        onFilter: (columnName: string) => void;
+        onGroup: (columnName: string) => void;
+        onHide: (columnName: string) => void;
+        onClose: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ColumnMenuProps = typeof __propDef.props;
+export type ColumnMenuEvents = typeof __propDef.events;
+export type ColumnMenuSlots = typeof __propDef.slots;
+export default class ColumnMenu extends SvelteComponent<ColumnMenuProps, ColumnMenuEvents, ColumnMenuSlots> {
+}
+export {};