@shotleybuilder/svelte-table-kit 0.1.0

package/dist/TableKit.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import { type ColumnDef } from '@tanstack/svelte-table';
+import type { TableKitProps } from './types';
+declare class __sveltets_Render<T> {
+    props(): {
+        data?: T[] | undefined;
+        columns?: ColumnDef<T>[] | undefined;
+        storageKey?: TableKitProps<T_1>["storageKey"];
+        persistState?: TableKitProps<T_1>["persistState"];
+        features?: TableKitProps<T_1>["features"];
+        onRowClick?: ((row: T) => void) | undefined;
+        onRowSelect?: ((rows: T[]) => void) | undefined;
+        onStateChange?: TableKitProps<T_1>["onStateChange"];
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        empty: {};
+        cell: {
+            cell: import("@tanstack/table-core").Cell<T, unknown>;
+            column: string;
+        };
+    };
+}
+export type TableKitProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TableKitEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TableKitSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TableKit<T> extends SvelteComponent<TableKitProps_<T>, TableKitEvents<T>, TableKitSlots<T>> {
+}
+export {};

package/dist/components/FilterBar.svelte

@@ -0,0 +1,291 @@
+<script>import FilterConditionComponent from "./FilterCondition.svelte";
+export let columns;
+export let conditions = [];
+export let onConditionsChange;
+export let logic = "and";
+export let onLogicChange;
+let isExpanded = false;
+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]);
+  isExpanded = true;
+}
+function updateCondition(index, updated) {
+  const newConditions = [...conditions];
+  newConditions[index] = updated;
+  onConditionsChange(newConditions);
+}
+function removeCondition(index) {
+  const newConditions = conditions.filter((_, i) => i !== index);
+  onConditionsChange(newConditions);
+  if (newConditions.length === 0) {
+    isExpanded = false;
+  }
+}
+function clearAllConditions() {
+  onConditionsChange([]);
+  isExpanded = false;
+}
+$: 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">
+	<!-- Compact Filter Button -->
+	<button class="filter-toggle-btn" on:click={() => (isExpanded = !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>
+
+	<!-- Expandable Filter Panel -->
+	{#if isExpanded}
+		<div class="filter-panel">
+			{#if hasConditions}
+				<div class="filter-header">
+					{#if hasConditions}
+						<button class="clear-all-btn" on:click={clearAllConditions}> Clear all </button>
+					{/if}
+				</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}
+									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;
+	}
+
+	/* Compact Filter Toggle Button */
+	.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);
+	}
+
+	/* Expandable Filter Panel */
+	.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,24 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnDef } from '@tanstack/svelte-table';
+import type { FilterCondition, FilterLogic } from '../types';
+declare const __propDef: {
+    props: {
+        columns: ColumnDef<any>[];
+        conditions?: FilterCondition[];
+        onConditionsChange: (conditions: FilterCondition[]) => void;
+        logic?: FilterLogic;
+        onLogicChange: (logic: FilterLogic) => 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> {
+}
+export {};

package/dist/components/FilterCondition.svelte

@@ -0,0 +1,135 @@
+<script>export let condition;
+export let columns;
+export let onUpdate;
+export let onRemove;
+const operatorOptions = [
+  { value: "equals", label: "equals" },
+  { value: "not_equals", label: "does not equal" },
+  { value: "contains", label: "contains" },
+  { value: "not_contains", label: "does not contain" },
+  { value: "starts_with", label: "starts with" },
+  { value: "ends_with", label: "ends with" },
+  { value: "is_empty", label: "is empty" },
+  { value: "is_not_empty", label: "is not empty" },
+  { value: "greater_than", label: ">" },
+  { value: "less_than", label: "<" },
+  { value: "greater_or_equal", label: ">=" },
+  { value: "less_or_equal", label: "<=" }
+];
+function handleFieldChange(event) {
+  const field = event.target.value;
+  onUpdate({ ...condition, field });
+}
+function handleOperatorChange(event) {
+  const operator = event.target.value;
+  onUpdate({ ...condition, operator });
+}
+function handleValueChange(event) {
+  const value = event.target.value;
+  onUpdate({ ...condition, value });
+}
+$: valueDisabled = condition.operator === "is_empty" || condition.operator === "is_not_empty";
+</script>
+
+<div class="filter-condition">
+	<select class="field-select" value={condition.field} on:change={handleFieldChange}>
+		<option value="">Select field...</option>
+		{#each columns as column}
+			{@const columnId = column.accessorKey || column.id}
+			{#if columnId}
+				<option value={columnId}>
+					{column.header || columnId}
+				</option>
+			{/if}
+		{/each}
+	</select>
+
+	<select class="operator-select" value={condition.operator} on:change={handleOperatorChange}>
+		{#each operatorOptions as option}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+
+	<input
+		type="text"
+		class="value-input"
+		value={condition.value || ''}
+		on:input={handleValueChange}
+		disabled={valueDisabled}
+		placeholder={valueDisabled ? 'N/A' : 'Enter value...'}
+	/>
+
+	<button class="remove-btn" on:click={onRemove} title="Remove condition">
+		<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>
+
+<style>
+	.filter-condition {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		padding: 0.5rem;
+		background: #f9fafb;
+		border-radius: 0.375rem;
+	}
+
+	.field-select,
+	.operator-select,
+	.value-input {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		background: white;
+	}
+
+	.field-select {
+		flex: 1;
+		min-width: 120px;
+	}
+
+	.operator-select {
+		flex: 0.8;
+		min-width: 100px;
+	}
+
+	.value-input {
+		flex: 1;
+		min-width: 120px;
+	}
+
+	.value-input:disabled {
+		background: #f3f4f6;
+		color: #9ca3af;
+		cursor: not-allowed;
+	}
+
+	.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;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnDef } from '@tanstack/svelte-table';
+import type { FilterCondition } from '../types';
+declare const __propDef: {
+    props: {
+        condition: FilterCondition;
+        columns: ColumnDef<any>[];
+        onUpdate: (condition: FilterCondition) => void;
+        onRemove: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FilterConditionProps = typeof __propDef.props;
+export type FilterConditionEvents = typeof __propDef.events;
+export type FilterConditionSlots = typeof __propDef.slots;
+export default class FilterCondition extends SvelteComponent<FilterConditionProps, FilterConditionEvents, FilterConditionSlots> {
+}
+export {};