@shotleybuilder/svelte-table-kit 0.2.0 → 0.5.0

package/dist/components/SortCondition.svelte

@@ -0,0 +1,131 @@
+<script>export let columnId;
+export let desc;
+export let columns;
+export let sorting;
+export let onUpdate;
+export let onRemove;
+const directionOptions = [
+  { value: "asc", label: "A \u2192 Z", icon: "\u2191" },
+  { value: "desc", label: "Z \u2192 A", icon: "\u2193" }
+];
+function handleColumnChange(event) {
+  const newColumnId = event.target.value;
+  onUpdate(newColumnId, desc);
+}
+function handleDirectionChange(event) {
+  const direction = event.target.value;
+  onUpdate(columnId, direction === "desc");
+}
+function getColumnId(col) {
+  return col.accessorKey || col.id;
+}
+$: availableColumns = columns.filter((col) => {
+  const colId = getColumnId(col);
+  if (!colId || col.enableSorting === false) return false;
+  return colId === columnId || !sorting.some((s) => s.id === colId);
+});
+$: columnOptions = availableColumns.map((col) => ({
+  id: getColumnId(col) || "",
+  label: col.header || getColumnId(col) || ""
+}));
+$: currentDirection = desc ? "desc" : "asc";
+</script>
+
+<div class="sort-condition">
+	<select class="field-select" value={columnId} on:change={handleColumnChange}>
+		<option value="">Select field...</option>
+		{#each columnOptions as option}
+			<option value={option.id}>
+				{option.label}
+			</option>
+		{/each}
+	</select>
+
+	<select
+		class="direction-select"
+		value={currentDirection}
+		on:change={handleDirectionChange}
+		disabled={!columnId}
+	>
+		{#each directionOptions as option}
+			<option value={option.value}>
+				{option.icon} {option.label}
+			</option>
+		{/each}
+	</select>
+
+	<button class="remove-btn" on:click={onRemove} title="Remove sort">
+		<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>
+	.sort-condition {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		background: #f9fafb;
+		border-radius: 0.375rem;
+	}
+
+	.field-select,
+	.direction-select {
+		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: 150px;
+	}
+
+	.direction-select {
+		flex: 0.7;
+		min-width: 120px;
+	}
+
+	.direction-select:disabled {
+		background: #f3f4f6;
+		color: #9ca3af;
+		cursor: not-allowed;
+	}
+
+	.field-select:focus,
+	.direction-select:focus {
+		outline: none;
+		border-color: #f59e0b;
+		box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+	}
+
+	.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/SortCondition.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnDef } from '@tanstack/svelte-table';
+import type { SortingState } from '@tanstack/svelte-table';
+declare const __propDef: {
+    props: {
+        columnId: string;
+        desc: boolean;
+        columns: ColumnDef<any>[];
+        sorting: SortingState;
+        onUpdate: (columnId: string, desc: boolean) => void;
+        onRemove: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SortConditionProps = typeof __propDef.props;
+export type SortConditionEvents = typeof __propDef.events;
+export type SortConditionSlots = typeof __propDef.slots;
+export default class SortCondition extends SvelteComponent<SortConditionProps, SortConditionEvents, SortConditionSlots> {
+}
+export {};

package/dist/types.d.ts

@@ -21,6 +21,7 @@ export interface TableFeatures {
     columnReordering?: boolean;
     filtering?: boolean;
     sorting?: boolean;
+    sortingMode?: 'header' | 'control';
     pagination?: boolean;
     rowSelection?: boolean;
     grouping?: boolean;
@@ -37,6 +38,7 @@ export interface TableConfig {
         right?: string[];
     };
     defaultFilters?: FilterCondition[];
+    filterLogic?: FilterLogic;
     defaultSorting?: SortConfig[];
     pagination?: {
         pageSize: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotleybuilder/svelte-table-kit",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "A comprehensive, AI-configurable data table component for Svelte and SvelteKit, built on TanStack Table v8",
   "author": "Sertantai",
   "license": "MIT",