@shotleybuilder/svelte-table-kit 0.6.0 → 0.12.0

package/dist/components/FilterCondition.svelte

@@ -1,24 +1,209 @@
-<script>export let condition;
+<script>import { loadFilterColumnOrderMode, saveFilterColumnOrderMode } from "../stores/persistence";
+import { fuzzyMatch, highlightMatches } from "../utils/fuzzy";
+import { getOperatorsForType } from "../utils/filters";
+import { onMount, tick } from "svelte";
+export let condition;
 export let columns;
+export let columnOrder = [];
+export let storageKey = "table-kit";
+export let columnValues = [];
+export let numericRange = null;
 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;
+let orderMode = "definition";
+let searchTerm = "";
+let showDropdown = false;
+let highlightedIndex = 0;
+let searchInputRef;
+let dropdownRef;
+let showValueSuggestions = false;
+let valueSuggestionIndex = 0;
+let valueInputRef;
+let valueSuggestionsRef;
+onMount(() => {
+  orderMode = loadFilterColumnOrderMode(storageKey);
+  function handleClickOutside(event) {
+    if (dropdownRef && !dropdownRef.contains(event.target)) {
+      showDropdown = false;
+    }
+    if (valueSuggestionsRef && !valueSuggestionsRef.contains(event.target)) {
+      showValueSuggestions = false;
+    }
+  }
+  document.addEventListener("click", handleClickOutside);
+  return () => document.removeEventListener("click", handleClickOutside);
+});
+$: filteredValueSuggestions = (() => {
+  if (!columnValues || columnValues.length === 0) return [];
+  const currentValue = condition.value || "";
+  if (!currentValue.trim()) {
+    return columnValues.slice(0, 50).map((val) => ({
+      value: val,
+      matchedIndices: [],
+      score: 0
+    }));
+  }
+  const results = [];
+  for (const val of columnValues) {
+    const match = fuzzyMatch(currentValue, val);
+    if (match) {
+      results.push({
+        value: val,
+        matchedIndices: match.matchedIndices,
+        score: match.score
+      });
+    }
+  }
+  return results.sort((a, b) => b.score - a.score).slice(0, 50);
+})();
+$: if (filteredValueSuggestions) {
+  valueSuggestionIndex = 0;
+}
+$: canShowSuggestions = columnValues.length > 0 && !valueDisabled;
+function cycleOrderMode() {
+  const modes = ["definition", "ui", "alphabetical"];
+  const currentIndex = modes.indexOf(orderMode);
+  orderMode = modes[(currentIndex + 1) % modes.length];
+  saveFilterColumnOrderMode(storageKey, orderMode);
+}
+function getOrderModeLabel(mode) {
+  switch (mode) {
+    case "definition":
+      return "Default";
+    case "ui":
+      return "Table";
+    case "alphabetical":
+      return "A-Z";
+    default:
+      return "Default";
+  }
+}
+function getColumnId(col) {
+  return col.accessorKey || col.id || "";
+}
+function getColumnLabel(col) {
+  return String(col.header || getColumnId(col));
+}
+$: orderedColumns = (() => {
+  switch (orderMode) {
+    case "alphabetical":
+      return [...columns].sort((a, b) => {
+        const labelA = getColumnLabel(a).toLowerCase();
+        const labelB = getColumnLabel(b).toLowerCase();
+        return labelA.localeCompare(labelB);
+      });
+    case "ui":
+      return [...columns].sort((a, b) => {
+        const idA = getColumnId(a);
+        const idB = getColumnId(b);
+        const indexA = columnOrder.indexOf(idA);
+        const indexB = columnOrder.indexOf(idB);
+        const posA = indexA === -1 ? 999 : indexA;
+        const posB = indexB === -1 ? 999 : indexB;
+        return posA - posB;
+      });
+    case "definition":
+    default:
+      return columns;
+  }
+})();
+$: filteredColumns = (() => {
+  if (!searchTerm.trim()) {
+    return orderedColumns.map((col) => ({
+      column: col,
+      matchedIndices: [],
+      score: 0
+    }));
+  }
+  const results = [];
+  for (const col of orderedColumns) {
+    const label = getColumnLabel(col);
+    const match = fuzzyMatch(searchTerm, label);
+    if (match) {
+      results.push({
+        column: col,
+        matchedIndices: match.matchedIndices,
+        score: match.score
+      });
+    }
+  }
+  return results.sort((a, b) => b.score - a.score);
+})();
+$: if (filteredColumns) {
+  highlightedIndex = 0;
+}
+$: selectedColumn = condition.field ? columns.find((c) => getColumnId(c) === condition.field) : null;
+$: selectedColumnLabel = (() => {
+  if (!condition.field) return "";
+  return selectedColumn ? getColumnLabel(selectedColumn) : condition.field;
+})();
+$: columnDataType = (() => {
+  if (!selectedColumn) return "text";
+  const meta = selectedColumn.meta;
+  return meta?.dataType || "text";
+})();
+$: selectOptions = (() => {
+  if (!selectedColumn) return [];
+  const meta = selectedColumn.meta;
+  return meta?.selectOptions || [];
+})();
+$: operatorOptions = getOperatorsForType(columnDataType);
+$: {
+  if (condition.field && operatorOptions.length > 0) {
+    const currentOperatorValid = operatorOptions.some((op) => op.value === condition.operator);
+    if (!currentOperatorValid) {
+      onUpdate({ ...condition, operator: "equals" });
+    }
+  }
+}
+function selectColumn(col) {
+  const field = getColumnId(col);
   onUpdate({ ...condition, field });
+  showDropdown = false;
+  searchTerm = "";
+}
+function handleSearchKeydown(event) {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      highlightedIndex = Math.min(highlightedIndex + 1, filteredColumns.length - 1);
+      scrollToHighlighted();
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      highlightedIndex = Math.max(highlightedIndex - 1, 0);
+      scrollToHighlighted();
+      break;
+    case "Enter":
+      event.preventDefault();
+      if (filteredColumns[highlightedIndex]) {
+        selectColumn(filteredColumns[highlightedIndex].column);
+      }
+      break;
+    case "Escape":
+      event.preventDefault();
+      showDropdown = false;
+      searchTerm = "";
+      break;
+    case "Tab":
+      showDropdown = false;
+      break;
+  }
+}
+async function scrollToHighlighted() {
+  await tick();
+  const highlighted = dropdownRef?.querySelector(".field-option.highlighted");
+  if (highlighted) {
+    highlighted.scrollIntoView({ block: "nearest" });
+  }
+}
+function openDropdown() {
+  showDropdown = true;
+  searchTerm = "";
+  highlightedIndex = 0;
+  tick().then(() => {
+    searchInputRef?.focus();
+  });
 }
 function handleOperatorChange(event) {
   const operator = event.target.value;
@@ -27,22 +212,131 @@ function handleOperatorChange(event) {
 function handleValueChange(event) {
   const value = event.target.value;
   onUpdate({ ...condition, value });
+  if (canShowSuggestions && value.length >= 0) {
+    showValueSuggestions = true;
+  }
+}
+function handleValueFocus() {
+  if (canShowSuggestions) {
+    showValueSuggestions = true;
+    valueSuggestionIndex = 0;
+  }
+}
+function selectValueSuggestion(value) {
+  onUpdate({ ...condition, value });
+  showValueSuggestions = false;
+}
+function handleValueKeydown(event) {
+  if (!showValueSuggestions || filteredValueSuggestions.length === 0) return;
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      valueSuggestionIndex = Math.min(
+        valueSuggestionIndex + 1,
+        filteredValueSuggestions.length - 1
+      );
+      scrollToHighlightedSuggestion();
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      valueSuggestionIndex = Math.max(valueSuggestionIndex - 1, 0);
+      scrollToHighlightedSuggestion();
+      break;
+    case "Enter":
+      event.preventDefault();
+      if (filteredValueSuggestions[valueSuggestionIndex]) {
+        selectValueSuggestion(filteredValueSuggestions[valueSuggestionIndex].value);
+      }
+      break;
+    case "Escape":
+      event.preventDefault();
+      showValueSuggestions = false;
+      break;
+    case "Tab":
+      showValueSuggestions = false;
+      break;
+  }
+}
+async function scrollToHighlightedSuggestion() {
+  await tick();
+  const highlighted = valueSuggestionsRef?.querySelector(".suggestion-option.highlighted");
+  if (highlighted) {
+    highlighted.scrollIntoView({ block: "nearest" });
+  }
 }
 $: 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>
+	<div class="field-picker-wrapper" bind:this={dropdownRef}>
+		<button
+			class="field-picker-trigger"
+			class:has-value={condition.field}
+			on:click={openDropdown}
+			type="button"
+		>
+			<span class="field-picker-text">
+				{selectedColumnLabel || 'Select field...'}
+			</span>
+			<svg class="chevron-icon" 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 showDropdown}
+			<div class="field-dropdown">
+				<div class="field-search-wrapper">
+					<input
+						bind:this={searchInputRef}
+						type="text"
+						class="field-search"
+						placeholder="Search fields..."
+						bind:value={searchTerm}
+						on:keydown={handleSearchKeydown}
+					/>
+					<button
+						class="order-mode-btn"
+						on:click|stopPropagation={cycleOrderMode}
+						title="Change column order: {getOrderModeLabel(orderMode)}"
+						type="button"
+					>
+						{getOrderModeLabel(orderMode)}
+					</button>
+				</div>
+
+				<div class="field-options">
+					{#each filteredColumns as { column, matchedIndices }, i}
+						{@const columnId = getColumnId(column)}
+						{@const columnLabel = getColumnLabel(column)}
+						{#if columnId}
+							<button
+								class="field-option"
+								class:highlighted={i === highlightedIndex}
+								class:selected={columnId === condition.field}
+								on:click={() => selectColumn(column)}
+								on:mouseenter={() => (highlightedIndex = i)}
+								type="button"
+							>
+								{#if matchedIndices.length > 0}
+									{#each highlightMatches(columnLabel, matchedIndices) as segment}
+										{#if segment.isMatch}
+											<mark class="match-highlight">{segment.text}</mark>
+										{:else}
+											{segment.text}
+										{/if}
+									{/each}
+								{:else}
+									{columnLabel}
+								{/if}
+							</button>
+						{/if}
+					{:else}
+						<div class="no-results">No matching fields</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
 
 	<select class="operator-select" value={condition.operator} on:change={handleOperatorChange}>
 		{#each operatorOptions as option}
@@ -50,16 +344,107 @@ $: valueDisabled = condition.operator === "is_empty" || condition.operator === "
 		{/each}
 	</select>
 
-	<input
-		type="text"
-		class="value-input"
-		value={condition.value || ''}
-		on:input={handleValueChange}
-		disabled={valueDisabled}
-		placeholder={valueDisabled ? 'N/A' : 'Enter value...'}
-	/>
+	<div class="value-input-wrapper" bind:this={valueSuggestionsRef}>
+		{#if columnDataType === 'boolean'}
+			<!-- Boolean: dropdown with true/false -->
+			<select
+				class="value-input"
+				value={condition.value || ''}
+				on:change={handleValueChange}
+				disabled={valueDisabled}
+			>
+				<option value="">Select...</option>
+				<option value="true">True</option>
+				<option value="false">False</option>
+			</select>
+		{:else if columnDataType === 'select' && selectOptions.length > 0}
+			<!-- Select: dropdown with options from meta -->
+			<select
+				class="value-input"
+				value={condition.value || ''}
+				on:change={handleValueChange}
+				disabled={valueDisabled}
+			>
+				<option value="">Select...</option>
+				{#each selectOptions as opt}
+					<option value={opt.value}>{opt.label}</option>
+				{/each}
+			</select>
+		{:else if columnDataType === 'date'}
+			<!-- Date: date input -->
+			<input
+				bind:this={valueInputRef}
+				type="date"
+				class="value-input"
+				value={condition.value || ''}
+				on:input={handleValueChange}
+				disabled={valueDisabled}
+			/>
+		{:else if columnDataType === 'number'}
+			<!-- Number: number input with range hint -->
+			<input
+				bind:this={valueInputRef}
+				type="number"
+				class="value-input"
+				value={condition.value || ''}
+				on:input={handleValueChange}
+				disabled={valueDisabled}
+				placeholder={valueDisabled ? 'N/A' : numericRange ? `${numericRange.min} - ${numericRange.max}` : 'Enter number...'}
+			/>
+			{#if numericRange && !valueDisabled}
+				<div class="numeric-range-hint">
+					Range: {numericRange.min} - {numericRange.max}
+				</div>
+			{/if}
+		{:else}
+			<!-- Text: text input with autocomplete suggestions -->
+			<input
+				bind:this={valueInputRef}
+				type="text"
+				class="value-input"
+				value={condition.value || ''}
+				on:input={handleValueChange}
+				on:focus={handleValueFocus}
+				on:keydown={handleValueKeydown}
+				disabled={valueDisabled}
+				placeholder={valueDisabled ? 'N/A' : 'Enter value...'}
+				autocomplete="off"
+			/>
+
+			{#if showValueSuggestions && filteredValueSuggestions.length > 0}
+				<div class="value-suggestions">
+					{#each filteredValueSuggestions as { value, matchedIndices }, i}
+						<button
+							class="suggestion-option"
+							class:highlighted={i === valueSuggestionIndex}
+							on:click={() => selectValueSuggestion(value)}
+							on:mouseenter={() => (valueSuggestionIndex = i)}
+							type="button"
+						>
+							{#if matchedIndices.length > 0}
+								{#each highlightMatches(value, matchedIndices) as segment}
+									{#if segment.isMatch}
+										<mark class="match-highlight">{segment.text}</mark>
+									{:else}
+										{segment.text}
+									{/if}
+								{/each}
+							{:else}
+								{value}
+							{/if}
+						</button>
+					{/each}
+					{#if columnValues.length > 50}
+						<div class="suggestions-overflow">
+							and {columnValues.length - 50} more...
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</div>
 
-	<button class="remove-btn" on:click={onRemove} title="Remove condition">
+	<button class="remove-btn" on:click={onRemove} title="Remove condition" type="button">
 		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path
 				stroke-linecap="round"
@@ -81,19 +466,165 @@ $: valueDisabled = condition.operator === "is_empty" || condition.operator === "
 		border-radius: 0.375rem;
 	}
 
-	.field-select,
-	.operator-select,
-	.value-input {
+	.field-picker-wrapper {
+		position: relative;
+		flex: 1;
+		min-width: 150px;
+	}
+
+	.field-picker-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
 		padding: 0.375rem 0.75rem;
 		font-size: 0.875rem;
+		text-align: left;
 		border: 1px solid #d1d5db;
 		border-radius: 0.375rem;
 		background: white;
+		cursor: pointer;
+		transition: border-color 0.15s;
+	}
+
+	.field-picker-trigger:hover {
+		border-color: #9ca3af;
+	}
+
+	.field-picker-trigger:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+	}
+
+	.field-picker-trigger:not(.has-value) .field-picker-text {
+		color: #9ca3af;
+	}
+
+	.field-picker-text {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.chevron-icon {
+		width: 1rem;
+		height: 1rem;
+		color: #6b7280;
+		flex-shrink: 0;
+	}
+
+	.field-dropdown {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		width: 100%;
+		min-width: 200px;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		z-index: 50;
+		overflow: hidden;
+	}
+
+	.field-search-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.5rem;
+		border-bottom: 1px solid #e5e7eb;
 	}
 
-	.field-select {
+	.field-search {
 		flex: 1;
-		min-width: 120px;
+		padding: 0.375rem 0.5rem;
+		font-size: 0.875rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.25rem;
+		outline: none;
+	}
+
+	.field-search:focus {
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+	}
+
+	.order-mode-btn {
+		flex-shrink: 0;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+		color: #6b7280;
+		background: #e5e7eb;
+		border: none;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.order-mode-btn:hover {
+		background: #d1d5db;
+		color: #374151;
+	}
+
+	.field-options {
+		max-height: 200px;
+		overflow-y: auto;
+	}
+
+	.field-option {
+		display: block;
+		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;
+	}
+
+	.field-option:hover,
+	.field-option.highlighted {
+		background: #f3f4f6;
+	}
+
+	.field-option.selected {
+		background: #eff6ff;
+		color: #1d4ed8;
+	}
+
+	.field-option.highlighted.selected {
+		background: #dbeafe;
+	}
+
+	.match-highlight {
+		background: #fef08a;
+		color: inherit;
+		padding: 0;
+		border-radius: 1px;
+	}
+
+	.no-results {
+		padding: 0.75rem;
+		text-align: center;
+		color: #6b7280;
+		font-size: 0.875rem;
+	}
+
+	.operator-select,
+	.value-input {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		background: white;
 	}
 
 	.operator-select {
@@ -101,6 +632,16 @@ $: valueDisabled = condition.operator === "is_empty" || condition.operator === "
 		min-width: 100px;
 	}
 
+	.value-input-wrapper {
+		position: relative;
+		flex: 1;
+		min-width: 120px;
+	}
+
+	.value-input-wrapper .value-input {
+		width: 100%;
+	}
+
 	.value-input {
 		flex: 1;
 		min-width: 120px;
@@ -112,6 +653,62 @@ $: valueDisabled = condition.operator === "is_empty" || condition.operator === "
 		cursor: not-allowed;
 	}
 
+	.value-suggestions {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		right: 0;
+		max-height: 200px;
+		overflow-y: auto;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		z-index: 50;
+	}
+
+	.suggestion-option {
+		display: block;
+		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;
+	}
+
+	.suggestion-option:hover,
+	.suggestion-option.highlighted {
+		background: #f3f4f6;
+	}
+
+	.suggestions-overflow {
+		padding: 0.5rem 0.75rem;
+		font-size: 0.75rem;
+		color: #6b7280;
+		text-align: center;
+		border-top: 1px solid #e5e7eb;
+		background: #f9fafb;
+	}
+
+	.numeric-range-hint {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		right: 0;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.75rem;
+		color: #6b7280;
+		background: #f9fafb;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.375rem;
+		text-align: center;
+	}
+
 	.remove-btn {
 		flex-shrink: 0;
 		padding: 0.375rem;