@makolabs/ripple 2.5.8 → 3.0.0

package/dist/filters/CompactFilters.svelte

@@ -1,10 +1,22 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import type { FilterTab, CompactFiltersProps } from '../index.js';
+	import type {
+		FilterTab,
+		FilterGroup,
+		FilterSelectionValue,
+		CompactFiltersProps
+	} from '../index.js';
 
-	// Props definition
 	let {
 		filterGroups = [],
+		selections = $bindable<Record<string, FilterSelectionValue>>({}),
+		onfilterchange,
+		defaults,
+		showClearAll = false,
+		clearAllLabel = 'Clear',
+		searchQuery = $bindable<string | undefined>(undefined),
+		searchPlaceholder = 'Search…',
+		chipSummary = false,
 		isExpanded = $bindable(false),
 		title = 'Filters',
 		class: className,
@@ -13,16 +25,115 @@
 		FilterIcon
 	}: CompactFiltersProps = $props();
 
-	// Toggle expanded state
+	// Search input only renders when the consumer bound to searchQuery.
+	const searchEnabled = $derived(searchQuery !== undefined);
+
 	function toggleExpanded() {
 		isExpanded = !isExpanded;
 	}
 
-	// Helper to get the label of the selected filter
-	function getSelectedLabel(tabs: FilterTab[], selectedValue: string): string {
-		const tab = tabs.find((tab) => tab.value === selectedValue);
+	/** Read the selected value(s) for a group from the `selections` map. */
+	function getSelected(group: FilterGroup): FilterSelectionValue {
+		const fromMap = selections[group.key];
+		if (fromMap !== undefined) return fromMap;
+		return group.multiple ? [] : '';
+	}
+
+	function isSelected(group: FilterGroup, value: string): boolean {
+		const current = getSelected(group);
+		if (Array.isArray(current)) return current.includes(value);
+		return current === value;
+	}
+
+	/** Toggle a value in a multi-select group. */
+	function toggleMulti(current: string[], value: string): string[] {
+		return current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+	}
+
+	/** Write selected value(s). */
+	function handleSelect(group: FilterGroup, value: string) {
+		let next: FilterSelectionValue;
+		if (group.multiple) {
+			const current = getSelected(group);
+			const arr: string[] = Array.isArray(current)
+				? (current as string[])
+				: typeof current === 'string' && current
+					? [current]
+					: [];
+			next = toggleMulti(arr, value);
+		} else {
+			next = value;
+		}
+		selections = { ...selections, [group.key]: next };
+		onfilterchange?.(group.key, next);
+	}
+
+	/** Remove a single selection (used by chip summary ×). */
+	function removeSelection(key: string, value: string) {
+		const group = filterGroups.find((g) => g.key === key);
+		if (!group) return;
+		if (group.multiple) {
+			const current = getSelected(group);
+			const arr: string[] = Array.isArray(current) ? (current as string[]) : [];
+			const next = arr.filter((v) => v !== value);
+			selections = { ...selections, [key]: next };
+			onfilterchange?.(key, next);
+		} else {
+			const next = defaults?.[key] ?? '';
+			selections = { ...selections, [key]: next };
+			onfilterchange?.(key, next);
+		}
+	}
+
+	function clearAll() {
+		const next = defaults ?? {};
+		selections = { ...next };
+		for (const group of filterGroups) {
+			onfilterchange?.(group.key, getSelected(group));
+		}
+	}
+
+	/** Are current selections different from defaults? */
+	const isDirty = $derived.by(() => {
+		if (!defaults) return Object.keys(selections).length > 0;
+		for (const key of new Set([...Object.keys(defaults), ...Object.keys(selections)])) {
+			const a = JSON.stringify(selections[key] ?? null);
+			const b = JSON.stringify(defaults[key] ?? null);
+			if (a !== b) return true;
+		}
+		return false;
+	});
+
+	function getSelectedLabel(tabs: FilterTab[], selectedValue: FilterSelectionValue): string {
+		if (Array.isArray(selectedValue)) {
+			if (selectedValue.length === 0) return 'All';
+			const labels = selectedValue.map((v) => tabs.find((t) => t.value === v)?.label || v);
+			return labels.join(', ');
+		}
+		if (typeof selectedValue !== 'string' || !selectedValue) return 'All';
+		const tab = tabs.find((t) => t.value === selectedValue);
 		return tab ? tab.label : 'All';
 	}
+
+	/** Chips for the collapsed chip summary. One chip per selected non-default value. */
+	const chips = $derived.by(() => {
+		const out: { key: string; value: string; label: string; groupLabel: string }[] = [];
+		for (const group of filterGroups) {
+			const current = getSelected(group);
+			const defaultValue = defaults?.[group.key];
+			const tabs = group.tabs ?? [];
+			if (Array.isArray(current)) {
+				for (const v of current) {
+					const label = tabs.find((t) => t.value === v)?.label ?? v;
+					out.push({ key: group.key, value: v, label, groupLabel: group.label });
+				}
+			} else if (typeof current === 'string' && current && current !== defaultValue) {
+				const label = tabs.find((t) => t.value === current)?.label ?? current;
+				out.push({ key: group.key, value: current, label, groupLabel: group.label });
+			}
+		}
+		return out;
+	});
 </script>
 
 {#snippet DefaultFilterIcon()}
@@ -71,50 +182,120 @@
 {/snippet}
 
 <div class={cn('border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}>
-	<button
-		onclick={toggleExpanded}
-		class="mb-2 flex min-w-full cursor-pointer items-center justify-between"
-	>
-		<div class="flex items-center gap-2">
+	<!-- Header row: title | search | clear | chevron.
+	     `flex-wrap` lets the search + controls drop to a second row on
+	     narrow viewports instead of overflowing off-screen. -->
+	<div class="mb-2 flex flex-wrap items-center gap-2">
+		<button
+			type="button"
+			onclick={toggleExpanded}
+			class="flex flex-1 cursor-pointer items-center gap-2"
+		>
 			{#if FilterIcon}
 				<FilterIcon size={16} class="text-default-500" />
 			{:else}
-				<span class="text-default-500">
-					{@render DefaultFilterIcon()}
-				</span>
+				<span class="text-default-500">{@render DefaultFilterIcon()}</span>
 			{/if}
 			<span class="text-sm font-medium">{title}</span>
-		</div>
-		<div
-			class="text-default-500 hover:bg-default-100 hover:text-default-700 rounded-md p-1"
+		</button>
+
+		{#if searchEnabled}
+			<!-- `w-full sm:w-48` lets the search field fill the row on
+			     narrow viewports (after wrapping) but stay compact on wide. -->
+			<div class="relative order-last w-full sm:order-none sm:w-auto">
+				<input
+					type="text"
+					class="border-default-200 focus:border-primary-400 h-7 w-full rounded-md border px-2 pr-6 text-xs focus:outline-none sm:w-48"
+					placeholder={searchPlaceholder}
+					bind:value={searchQuery}
+					data-filters-search=""
+				/>
+				{#if searchQuery}
+					<button
+						type="button"
+						onclick={() => (searchQuery = '')}
+						class="text-default-400 hover:text-default-700 absolute top-1/2 right-1 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded"
+						aria-label="Clear search"
+						data-filters-search-clear=""
+					>
+						<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+							<path
+								d="M3 3l6 6M9 3l-6 6"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+							/>
+						</svg>
+					</button>
+				{/if}
+			</div>
+		{/if}
+
+		{#if showClearAll && isDirty}
+			<button
+				type="button"
+				onclick={clearAll}
+				class="text-default-600 hover:bg-default-100 cursor-pointer rounded-md px-2 py-1 text-xs font-medium"
+				data-filters-clear-all=""
+			>
+				{clearAllLabel}
+			</button>
+		{/if}
+
+		<button
+			type="button"
+			onclick={toggleExpanded}
+			class="text-default-500 hover:bg-default-100 hover:text-default-700 cursor-pointer rounded-md p-1"
 			aria-label={isExpanded ? `Collapse ${title.toLowerCase()}` : `Expand ${title.toLowerCase()}`}
 		>
 			{#if isExpanded}
-				<span>{@render DefaultChevronUp()}</span>
+				{@render DefaultChevronUp()}
 			{:else}
-				<span>{@render DefaultChevronDown()}</span>
+				{@render DefaultChevronDown()}
 			{/if}
-		</div>
-	</button>
+		</button>
+	</div>
 
 	{#if !isExpanded}
-		<!-- Summary of selected filters when collapsed -->
 		<div class={cn('flex flex-wrap gap-2', summaryClass)}>
-			{#each filterGroups as group (group.key)}
-				{#if group.tabs.length > 0}
-					<div
-						class="bg-primary-50 text-primary-700 border-primary-200 flex items-center gap-1 rounded-full border px-3 py-1 text-xs"
+			{#if chipSummary}
+				{#each chips as chip (chip.key + '::' + chip.value)}
+					<span
+						class="bg-primary-50 text-primary-700 border-primary-200 flex items-center gap-1 rounded-full border px-2 py-1 text-xs"
+						data-filters-chip=""
 					>
-						<span class="font-medium">{group.label}:</span>
-						{getSelectedLabel(group.tabs, group.selectedValue)}
-					</div>
+						<span class="font-medium">{chip.groupLabel}:</span>
+						<span>{chip.label}</span>
+						<button
+							type="button"
+							onclick={() => removeSelection(chip.key, chip.value)}
+							aria-label={`Remove ${chip.groupLabel}: ${chip.label}`}
+							class="text-primary-600 hover:text-primary-900 ml-1 cursor-pointer"
+						>
+							×
+						</button>
+					</span>
+				{/each}
+				{#if chips.length === 0}
+					<span class="text-default-400 text-xs">No filters applied</span>
 				{/if}
-			{/each}
+			{:else}
+				{#each filterGroups as group (group.key)}
+					{#if (group.tabs ?? []).length > 0}
+						<div
+							class="bg-primary-50 text-primary-700 border-primary-200 flex items-center gap-1 rounded-full border px-3 py-1 text-xs"
+						>
+							<span class="font-medium">{group.label}:</span>
+							{getSelectedLabel(group.tabs ?? [], getSelected(group))}
+						</div>
+					{/if}
+				{/each}
+			{/if}
 		</div>
 	{:else}
 		<div class={cn('flex flex-col gap-2', expandedClass)}>
 			{#each filterGroups as group, index (group.key)}
-				{#if group.tabs.length > 0}
+				{#if (group.tabs ?? []).length > 0}
 					<div
 						class={cn(
 							'flex items-center gap-2 pb-2',
@@ -128,16 +309,23 @@
 						</div>
 						<div class="flex flex-wrap gap-2">
 							{#each group.tabs as tab (tab.value)}
+								{@const active = isSelected(group, tab.value)}
 								<button
-									onclick={() => group.onChange(tab.value)}
+									type="button"
+									onclick={() => handleSelect(group, tab.value)}
 									class={cn(
 										'rounded-full border px-3 py-1 text-xs font-medium whitespace-nowrap',
-										group.selectedValue === tab.value
+										active
 											? 'bg-primary-50 text-primary-700 border-primary-200'
 											: 'border-default-200 text-default-700 hover:bg-default-50'
 									)}
 								>
 									{tab.label}
+									{#if tab.count !== undefined}
+										<span class={cn('ml-1', active ? 'text-primary-500' : 'text-default-400')}
+											>({tab.count})</span
+										>
+									{/if}
 								</button>
 							{/each}
 						</div>

package/dist/filters/CompactFilters.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CompactFiltersProps } from '../index.js';
-declare const CompactFilters: import("svelte").Component<CompactFiltersProps, {}, "isExpanded">;
+declare const CompactFilters: import("svelte").Component<CompactFiltersProps, {}, "selections" | "searchQuery" | "isExpanded">;
 type CompactFilters = ReturnType<typeof CompactFilters>;
 export default CompactFilters;

package/dist/filters/FilterBar.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import type {
+		FilterGroup,
+		FilterSelectionValue,
+		DateRangeValue,
+		CompactFiltersProps
+	} from '../index.js';
+	import FilterPopover from './FilterPopover.svelte';
+	import { defaultDatePresets, toIsoDate } from './date-presets.js';
+
+	let {
+		filterGroups = [],
+		selections = $bindable<Record<string, FilterSelectionValue>>({}),
+		onfilterchange,
+		defaults,
+		showClearAll = false,
+		clearAllLabel = 'Clear all',
+		class: className,
+		testId
+	}: Pick<
+		CompactFiltersProps,
+		| 'filterGroups'
+		| 'selections'
+		| 'onfilterchange'
+		| 'defaults'
+		| 'showClearAll'
+		| 'clearAllLabel'
+		| 'class'
+		| 'testId'
+	> = $props();
+
+	let addMenuOpen = $state(false);
+	let addMenuRef = $state<HTMLDivElement | undefined>();
+
+	function isGroupActive(group: FilterGroup): boolean {
+		const v = selections[group.key];
+		if (v === undefined || v === null) return false;
+		if (Array.isArray(v)) return v.length > 0;
+		if (typeof v === 'object') return true; // DateRangeValue
+		const def = defaults?.[group.key];
+		if (def !== undefined) return v !== def;
+		return !!v;
+	}
+
+	/** Groups currently shown as pills (have a selection that differs from default). */
+	const activeGroups = $derived(filterGroups.filter(isGroupActive));
+
+	/** Groups not yet used — available in the "+ Add filter" menu. */
+	const availableGroups = $derived(filterGroups.filter((g) => !isGroupActive(g)));
+
+	function addGroup(group: FilterGroup) {
+		let next: FilterSelectionValue;
+		if (group.dateRange) {
+			// Seed a date-range group with the first preset so a pill appears.
+			const cfg = typeof group.dateRange === 'object' ? group.dateRange : {};
+			const presets = cfg.presets ?? defaultDatePresets;
+			const first = presets[0];
+			if (!first) return;
+			const { from, to } = first.range();
+			const value: DateRangeValue = {
+				from: toIsoDate(from),
+				to: toIsoDate(to),
+				preset: first.value
+			};
+			next = value;
+		} else {
+			const firstTab = group.tabs?.[0];
+			if (!firstTab) return;
+			next = group.multiple ? [firstTab.value] : firstTab.value;
+		}
+		selections = { ...selections, [group.key]: next };
+		onfilterchange?.(group.key, next);
+		addMenuOpen = false;
+	}
+
+	function removeGroup(group: FilterGroup) {
+		const def = defaults?.[group.key];
+		const next: FilterSelectionValue =
+			def !== undefined ? def : group.dateRange ? null : group.multiple ? [] : '';
+		selections = { ...selections, [group.key]: next };
+		onfilterchange?.(group.key, next);
+	}
+
+	function clearAll() {
+		selections = defaults ? { ...defaults } : {};
+		for (const group of filterGroups) {
+			onfilterchange?.(group.key, selections[group.key] ?? (group.multiple ? [] : ''));
+		}
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') addMenuOpen = false;
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (!addMenuOpen) return;
+		const t = e.target as Node;
+		if (addMenuRef && !addMenuRef.contains(t)) addMenuOpen = false;
+	}
+</script>
+
+<svelte:window onkeydown={handleKey} onmousedown={handleClickOutside} />
+
+<div class={cn('flex flex-wrap items-center gap-2', className)}>
+	{#each activeGroups as group (group.key)}
+		<div class="inline-flex items-center gap-1">
+			<FilterPopover
+				filterGroups={[group]}
+				bind:selections
+				{onfilterchange}
+				{defaults}
+				showClearAll={false}
+				{testId}
+			/>
+			<button
+				type="button"
+				onclick={() => removeGroup(group)}
+				class="text-default-400 hover:bg-default-100 hover:text-danger-500 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded"
+				aria-label="Remove {group.label} filter"
+				title="Remove {group.label}"
+			>
+				<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+					<path
+						d="M3 3l6 6M9 3l-6 6"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		</div>
+	{/each}
+
+	{#if availableGroups.length > 0}
+		<div class="relative" bind:this={addMenuRef}>
+			<button
+				type="button"
+				onclick={() => (addMenuOpen = !addMenuOpen)}
+				class={cn(
+					'inline-flex cursor-pointer items-center gap-1 rounded-full border border-dashed px-3 py-1 text-xs font-medium',
+					'border-default-300 text-default-600 hover:border-primary-300 hover:text-primary-600 hover:bg-primary-50 transition-colors'
+				)}
+				aria-haspopup="menu"
+				aria-expanded={addMenuOpen}
+			>
+				<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+					<path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+				</svg>
+				Add filter
+			</button>
+			{#if addMenuOpen}
+				<div
+					role="menu"
+					transition:fly={{ y: -4, duration: 180, easing: quintOut }}
+					class="border-default-200 absolute z-50 mt-1 min-w-[10rem] rounded-lg border bg-white p-1 shadow-lg"
+				>
+					{#each availableGroups as group (group.key)}
+						<button
+							type="button"
+							role="menuitem"
+							onclick={() => addGroup(group)}
+							class="text-default-700 hover:bg-default-50 flex w-full cursor-pointer items-center rounded-md px-3 py-1.5 text-xs"
+						>
+							{group.label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	{#if showClearAll && activeGroups.length > 0}
+		<button
+			type="button"
+			onclick={clearAll}
+			class="text-default-500 hover:bg-default-100 hover:text-default-700 ml-1 cursor-pointer rounded-md px-2 py-1 text-xs font-medium"
+		>
+			{clearAllLabel}
+		</button>
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { CompactFiltersProps } from '../index.js';
+declare const FilterBar: import("svelte").Component<Pick<CompactFiltersProps, "class" | "testId" | "filterGroups" | "selections" | "onfilterchange" | "defaults" | "showClearAll" | "clearAllLabel">, {}, "selections">;
+type FilterBar = ReturnType<typeof FilterBar>;
+export default FilterBar;