@shotleybuilder/svelte-table-kit 0.2.0 → 0.5.0

package/dist/components/ColumnMenu.svelte

@@ -0,0 +1,271 @@
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import { browser } from "$app/environment";
+export let column;
+export let isOpen = false;
+export let canSort = true;
+export let canFilter = true;
+export let canGroup = true;
+const dispatch = createEventDispatcher();
+let menuElement;
+$: currentSort = column.getIsSorted();
+$: canSortColumn = canSort && column.getCanSort();
+$: canFilterColumn = canFilter;
+$: canGroupColumn = canGroup;
+function handleSortAsc() {
+  dispatch("sort", { direction: "asc" });
+  dispatch("close");
+}
+function handleSortDesc() {
+  dispatch("sort", { direction: "desc" });
+  dispatch("close");
+}
+function handleFilter() {
+  dispatch("filter");
+  dispatch("close");
+}
+function handleGroup() {
+  dispatch("group");
+  dispatch("close");
+}
+function handleHideColumn() {
+  dispatch("hide");
+  dispatch("close");
+}
+function handleClickOutside(event) {
+  if (menuElement && !menuElement.contains(event.target)) {
+    dispatch("close");
+  }
+}
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    dispatch("close");
+  }
+}
+$: {
+  if (browser) {
+    if (isOpen) {
+      setTimeout(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleKeydown);
+      }, 0);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeydown);
+    }
+  }
+}
+onDestroy(() => {
+  if (browser) {
+    document.removeEventListener("mousedown", handleClickOutside);
+    document.removeEventListener("keydown", handleKeydown);
+  }
+});
+</script>
+
+{#if isOpen}
+	<div class="column-menu" bind:this={menuElement}>
+		<!-- Sort Actions -->
+		{#if canSortColumn}
+			<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"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<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"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<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}
+
+		<!-- Filter by this field -->
+		{#if canFilterColumn}
+			<button class="menu-item" on:click={handleFilter}>
+				<svg
+					class="menu-icon"
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<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}
+
+		<!-- Group by this field -->
+		{#if canGroupColumn}
+			<button class="menu-item" on:click={handleGroup}>
+				<svg
+					class="menu-icon"
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<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}
+
+		<!-- Hide Field -->
+		<button class="menu-item" on:click={handleHideColumn}>
+			<svg
+				class="menu-icon"
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<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 { Column } from '@tanstack/svelte-table';
+declare const __propDef: {
+    props: {
+        column: Column<any>;
+        isOpen?: boolean;
+        canSort?: boolean;
+        canFilter?: boolean;
+        canGroup?: boolean;
+    };
+    events: {
+        sort: CustomEvent<any>;
+        close: CustomEvent<any>;
+        filter: CustomEvent<any>;
+        group: CustomEvent<any>;
+        hide: CustomEvent<any>;
+    } & {
+        [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 {};

package/dist/components/FilterBar.svelte

@@ -4,7 +4,8 @@ export let conditions = [];
 export let onConditionsChange;
 export let logic = "and";
 export let onLogicChange;
-let isExpanded = false;
+export let isExpanded = false;
+export let onExpandedChange = void 0;
 function generateId() {
   return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -16,7 +17,13 @@ function addCondition() {
     value: ""
   };
   onConditionsChange([...conditions, newCondition]);
-  isExpanded = true;
+  setExpanded(true);
+}
+function setExpanded(value) {
+  isExpanded = value;
+  if (onExpandedChange) {
+    onExpandedChange(value);
+  }
 }
 function updateCondition(index, updated) {
   const newConditions = [...conditions];
@@ -27,12 +34,12 @@ function removeCondition(index) {
   const newConditions = conditions.filter((_, i) => i !== index);
   onConditionsChange(newConditions);
   if (newConditions.length === 0) {
-    isExpanded = false;
+    setExpanded(false);
   }
 }
 function clearAllConditions() {
   onConditionsChange([]);
-  isExpanded = false;
+  setExpanded(false);
 }
 $: hasConditions = conditions.length > 0;
 $: filterCount = conditions.filter(
@@ -42,7 +49,7 @@ $: filterCount = conditions.filter(
 
 <div class="filter-bar">
 	<!-- Compact Filter Button -->
-	<button class="filter-toggle-btn" on:click={() => (isExpanded = !isExpanded)}>
+	<button class="filter-toggle-btn" on:click={() => setExpanded(!isExpanded)}>
 		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path
 				stroke-linecap="round"

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

@@ -8,6 +8,8 @@ declare const __propDef: {
         onConditionsChange: (conditions: FilterCondition[]) => void;
         logic?: FilterLogic;
         onLogicChange: (logic: FilterLogic) => void;
+        isExpanded?: boolean;
+        onExpandedChange?: ((expanded: boolean) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/GroupBar.svelte

@@ -1,12 +1,19 @@
 <script>export let columns;
 export let grouping = [];
 export let onGroupingChange;
+export let isExpanded = false;
+export let onExpandedChange = void 0;
 const MAX_LEVELS = 3;
-let isExpanded = false;
+function setExpanded(value) {
+  isExpanded = value;
+  if (onExpandedChange) {
+    onExpandedChange(value);
+  }
+}
 function addGroup() {
   if (grouping.length >= MAX_LEVELS) return;
   onGroupingChange([...grouping, ""]);
-  isExpanded = true;
+  setExpanded(true);
 }
 function updateGroup(index, columnId) {
   const newGrouping = [...grouping];
@@ -17,12 +24,12 @@ function removeGroup(index) {
   const newGrouping = grouping.filter((_, i) => i !== index);
   onGroupingChange(newGrouping);
   if (newGrouping.length === 0) {
-    isExpanded = false;
+    setExpanded(false);
   }
 }
 function clearAllGroups() {
   onGroupingChange([]);
-  isExpanded = false;
+  setExpanded(false);
 }
 $: availableColumns = columns.filter((col) => {
   const columnId = col.accessorKey || col.id;
@@ -35,7 +42,7 @@ $: canAddMore = grouping.length < MAX_LEVELS;
 
 <div class="group-bar">
 	<!-- Compact Group Button -->
-	<button class="group-toggle-btn" on:click={() => (isExpanded = !isExpanded)}>
+	<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"

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         columns: ColumnDef<any>[];
         grouping?: string[];
         onGroupingChange: (grouping: string[]) => void;
+        isExpanded?: boolean;
+        onExpandedChange?: ((expanded: boolean) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/SortBar.svelte

@@ -0,0 +1,239 @@
+<script>import SortConditionComponent from "./SortCondition.svelte";
+export let columns;
+export let sorting = [];
+export let onSortingChange;
+let isExpanded = false;
+function addSort() {
+  const newSort = { id: "", desc: false };
+  onSortingChange([...sorting, newSort]);
+  isExpanded = true;
+}
+function updateSort(index, columnId, desc) {
+  const newSorting = [...sorting];
+  newSorting[index] = { id: columnId, desc };
+  onSortingChange(newSorting);
+}
+function removeSort(index) {
+  const newSorting = sorting.filter((_, i) => i !== index);
+  onSortingChange(newSorting);
+  if (newSorting.length === 0) {
+    isExpanded = false;
+  }
+}
+function clearAllSorts() {
+  onSortingChange([]);
+  isExpanded = false;
+}
+function createUpdateHandler(index) {
+  return (columnId, desc) => updateSort(index, columnId, desc);
+}
+function createRemoveHandler(index) {
+  return () => removeSort(index);
+}
+$: availableColumns = columns.filter((col) => {
+  const columnId = col.accessorKey || col.id;
+  return columnId && col.enableSorting !== false;
+});
+$: availableColumnsForNew = availableColumns.filter((col) => {
+  const columnId = col.accessorKey || col.id;
+  return !sorting.some((s) => s.id === columnId);
+});
+$: hasSorts = sorting.length > 0;
+$: validSortCount = sorting.filter((s) => s.id !== "").length;
+$: canAddMore = availableColumnsForNew.length > 0;
+</script>
+
+<div class="sort-bar">
+	<!-- Compact Sort Button -->
+	<button class="sort-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 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
+			/>
+		</svg>
+		Sort
+		{#if validSortCount > 0}
+			<span class="sort-badge">{validSortCount}</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 Sort Panel -->
+	{#if isExpanded}
+		<div class="sort-panel">
+			{#if hasSorts}
+				<div class="sort-header">
+					<span class="sort-label">Sort by</span>
+					<button class="clear-all-btn" on:click={clearAllSorts}> Clear all </button>
+				</div>
+
+				<div class="sort-levels">
+					{#each sorting as sort, index (index)}
+						<SortConditionComponent
+							columnId={sort.id}
+							desc={sort.desc}
+							{columns}
+							{sorting}
+							onUpdate={createUpdateHandler(index)}
+							onRemove={createRemoveHandler(index)}
+						/>
+					{/each}
+				</div>
+			{/if}
+
+			<button class="add-sort-btn" on:click={addSort} disabled={!canAddMore}>
+				<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>
+				{hasSorts ? 'Add another sort' : 'Add a sort'}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sort-bar {
+		position: relative;
+	}
+
+	/* Compact Sort Toggle Button */
+	.sort-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;
+	}
+
+	.sort-toggle-btn:hover {
+		background: #f9fafb;
+		border-color: #9ca3af;
+	}
+
+	.sort-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: #f59e0b;
+		border-radius: 0.75rem;
+	}
+
+	.chevron {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 0.2s;
+	}
+
+	.chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	/* Expandable Sort Panel */
+	.sort-panel {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 20;
+		min-width: 400px;
+		padding: 1rem;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+	}
+
+	.sort-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
+
+	.sort-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;
+	}
+
+	.sort-levels {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.add-sort-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #f59e0b;
+		background: white;
+		border: 1px dashed #f59e0b;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.add-sort-btn:hover:not(:disabled) {
+		background: #fef3c7;
+		border-style: solid;
+	}
+
+	.add-sort-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnDef } from '@tanstack/svelte-table';
+import type { SortingState } from '@tanstack/svelte-table';
+declare const __propDef: {
+    props: {
+        columns: ColumnDef<any>[];
+        sorting?: SortingState;
+        onSortingChange: (sorting: SortingState) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SortBarProps = typeof __propDef.props;
+export type SortBarEvents = typeof __propDef.events;
+export type SortBarSlots = typeof __propDef.slots;
+export default class SortBar extends SvelteComponent<SortBarProps, SortBarEvents, SortBarSlots> {
+}
+export {};