@joewinke/jatui 0.1.25 → 0.1.27

package/dist/components/FilterDropdown.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	/**
+	 * FilterDropdown Component
+	 * Reusable multi-select filter component for filter bars
+	 *
+	 * Supports two modes:
+	 * - dropdown: Click button to show options in dropdown menu (default)
+	 * - inline: Options displayed inline without dropdown wrapper
+	 *
+	 * Supports two styles:
+	 * - badge: Clickable badge buttons (default, good for compact filters)
+	 * - checkbox: Checkbox list in menu format (good for longer lists)
+	 */
+
+	interface FilterOption {
+		value: string;
+		label: string;
+		count: number;
+	}
+
+	interface Props {
+		/** Label shown on dropdown trigger button */
+		label: string;
+		/** Available options to select from */
+		options: FilterOption[];
+		/** Currently selected values */
+		selected: Set<string>;
+		/** Callback when option is toggled */
+		onToggle: (value: string) => void;
+		/** Function to get badge color class for a value */
+		colorFn?: (value: string, isSelected: boolean) => string;
+		/** Text to show when all options are selected */
+		allSelectedText?: string;
+		/** If true, empty selection means "all" (vs "none") */
+		emptyMeansAll?: boolean;
+		/** Display mode: 'dropdown' (default) or 'inline' */
+		mode?: 'dropdown' | 'inline';
+		/** Selection style: 'badge' (default) or 'checkbox' */
+		style?: 'badge' | 'checkbox';
+		/** Additional CSS class for the container */
+		class?: string;
+		/** Dropdown menu width class (e.g., 'w-44', 'w-52') */
+		menuWidth?: string;
+		/** Max height for scrollable content (e.g., 'max-h-60') */
+		maxHeight?: string;
+		/** Show hover effect on dropdown trigger */
+		hoverTrigger?: boolean;
+	}
+
+	let {
+		label,
+		options,
+		selected,
+		onToggle,
+		colorFn = () => 'badge-primary',
+		allSelectedText = 'all',
+		emptyMeansAll = false,
+		mode = 'dropdown',
+		style = 'badge',
+		class: className = '',
+		menuWidth = 'min-w-48',
+		maxHeight = '',
+		hoverTrigger = true
+	}: Props = $props();
+
+	// Compute display text for the trigger button
+	const displayText = $derived.by(() => {
+		if (emptyMeansAll && selected.size === 0) {
+			return allSelectedText;
+		}
+		if (selected.size === options.length && options.length > 0) {
+			return allSelectedText;
+		}
+		return String(selected.size);
+	});
+
+	// Compute badge class for trigger (show primary when filters active)
+	const triggerBadgeClass = $derived.by(() => {
+		if (emptyMeansAll) {
+			return selected.size > 0 ? 'badge-primary' : 'badge-ghost';
+		}
+		return 'badge-primary';
+	});
+
+	// Handle option toggle
+	function handleToggle(value: string) {
+		onToggle(value);
+	}
+
+	// Handle keyboard navigation
+	function handleKeydown(e: KeyboardEvent, value: string) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			handleToggle(value);
+		}
+	}
+</script>
+
+{#if mode === 'inline'}
+	<!-- Inline Mode: No dropdown wrapper, just badge/checkbox grid -->
+	<div class="flex flex-wrap gap-1.5 {className}">
+		{#each options as opt, index}
+			{#if style === 'checkbox'}
+				<label class="label cursor-pointer justify-start gap-2">
+					<input
+						type="checkbox"
+						class="checkbox checkbox-sm"
+						checked={selected.has(opt.value)}
+						onchange={() => handleToggle(opt.value)}
+					/>
+					<span>{opt.label}</span>
+					<span class="text-[0.75rem] opacity-60">({opt.count})</span>
+				</label>
+			{:else}
+				<button
+					class="badge badge-sm transition-all duration-200 cursor-pointer {selected.has(opt.value)
+						? colorFn(opt.value, true)
+						: 'badge-ghost hover:badge-primary/20'}"
+					onclick={() => handleToggle(opt.value)}
+					onkeydown={(e) => handleKeydown(e, opt.value)}
+				>
+					{opt.label}
+					<span class="ml-1 text-[0.75rem] opacity-60">({opt.count})</span>
+				</button>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<!-- Dropdown Mode: Click to show options -->
+	<div class="dropdown {hoverTrigger ? 'dropdown-hover' : ''} {className}">
+		<!-- Trigger Button -->
+		<div
+			tabindex="0"
+			role="button"
+			class="px-2.5 py-1 rounded cursor-pointer transition-all flex items-center gap-1.5 text-[0.8125rem] bg-base-200 border border-base-300 text-base-content/60"
+		>
+			<span>{label}</span>
+			<span
+				class="px-1.5 py-0.5 rounded text-[0.75rem] {selected.size > 0 && !(emptyMeansAll && selected.size === 0) ? 'bg-primary/20 text-primary' : 'bg-base-300 text-base-content opacity-60'}"
+			>
+				{displayText}
+			</span>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="w-3.5 h-3.5 text-base-content/50"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+			</svg>
+		</div>
+
+		<!-- Dropdown Content -->
+		{#if style === 'checkbox'}
+			<!-- Checkbox style: Menu with checkboxes -->
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<ul
+				tabindex="0"
+				class="dropdown-content z-40 menu p-2 shadow rounded-box {menuWidth} {maxHeight ? maxHeight + ' overflow-y-auto' : ''} bg-base-200 border border-base-300"
+			>
+				{#each options as opt, index}
+					<li>
+						<label
+							class="label cursor-pointer justify-start gap-2 rounded text-base-content/70"
+						>
+							<input
+								type="checkbox"
+								class="checkbox checkbox-sm border-base-content/40"
+								checked={selected.has(opt.value)}
+								onchange={() => handleToggle(opt.value)}
+							/>
+							<span class="truncate text-[0.8125rem]">{opt.label}</span>
+							<span class="text-[0.75rem] text-base-content/45">({opt.count})</span>
+						</label>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<!-- Badge style: Grid of clickable badges -->
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<div
+				tabindex="0"
+				role="menu"
+				class="dropdown-content rounded-box p-2 z-40 {menuWidth} mt-1 {maxHeight ? maxHeight + ' overflow-y-auto' : ''} bg-base-200 border border-base-300"
+			>
+				<div class="flex flex-wrap gap-1.5">
+					{#each options as opt, index}
+						<button
+							class="px-2 py-0.5 rounded text-[0.75rem] transition-all cursor-pointer border {selected.has(opt.value) ? 'bg-primary/20 border-primary/40 text-primary' : 'bg-base-300 border-base-content/20 text-base-content opacity-70 hover:opacity-100'}"
+							onclick={() => handleToggle(opt.value)}
+							onkeydown={(e) => handleKeydown(e, opt.value)}
+						>
+							{opt.label}
+							<span class="ml-1 text-base-content/50">({opt.count})</span>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,48 @@
+/**
+ * FilterDropdown Component
+ * Reusable multi-select filter component for filter bars
+ *
+ * Supports two modes:
+ * - dropdown: Click button to show options in dropdown menu (default)
+ * - inline: Options displayed inline without dropdown wrapper
+ *
+ * Supports two styles:
+ * - badge: Clickable badge buttons (default, good for compact filters)
+ * - checkbox: Checkbox list in menu format (good for longer lists)
+ */
+interface FilterOption {
+    value: string;
+    label: string;
+    count: number;
+}
+interface Props {
+    /** Label shown on dropdown trigger button */
+    label: string;
+    /** Available options to select from */
+    options: FilterOption[];
+    /** Currently selected values */
+    selected: Set<string>;
+    /** Callback when option is toggled */
+    onToggle: (value: string) => void;
+    /** Function to get badge color class for a value */
+    colorFn?: (value: string, isSelected: boolean) => string;
+    /** Text to show when all options are selected */
+    allSelectedText?: string;
+    /** If true, empty selection means "all" (vs "none") */
+    emptyMeansAll?: boolean;
+    /** Display mode: 'dropdown' (default) or 'inline' */
+    mode?: 'dropdown' | 'inline';
+    /** Selection style: 'badge' (default) or 'checkbox' */
+    style?: 'badge' | 'checkbox';
+    /** Additional CSS class for the container */
+    class?: string;
+    /** Dropdown menu width class (e.g., 'w-44', 'w-52') */
+    menuWidth?: string;
+    /** Max height for scrollable content (e.g., 'max-h-60') */
+    maxHeight?: string;
+    /** Show hover effect on dropdown trigger */
+    hoverTrigger?: boolean;
+}
+declare const FilterDropdown: import("svelte").Component<Props, {}, "">;
+type FilterDropdown = ReturnType<typeof FilterDropdown>;
+export default FilterDropdown;

package/dist/components/FloatingActionBar.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+	/**
+	 * FloatingActionBar Component
+	 * Fixed bottom-center bar for bulk selection actions on tables/lists.
+	 *
+	 * Usage:
+	 *   <FloatingActionBar
+	 *     count={selectedTasks.size}
+	 *     {actions}
+	 *     {dropdowns}
+	 *     loading={bulkActionLoading}
+	 *     onClear={clearSelection}
+	 *   />
+	 */
+
+	import { fade } from 'svelte/transition';
+
+	export interface ActionButton {
+		/** Unique key */
+		id: string;
+		/** Button label */
+		label: string;
+		/** SVG path string for a 24×24 icon (optional) */
+		icon?: string;
+		/** Color variant */
+		variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+		/** Called when clicked */
+		onclick: () => void;
+	}
+
+	export interface DropdownItem {
+		/** Display label */
+		label: string;
+		/** Optional colored dot (oklch string) */
+		dotColor?: string;
+		/** Optional SVG snippet rendered before the label */
+		iconSnippet?: import('svelte').Snippet;
+		/** Called when this item is clicked */
+		onclick: () => void;
+	}
+
+	export interface ActionDropdown {
+		/** Unique key */
+		id: string;
+		/** Button label */
+		label: string;
+		/** SVG path string for a 24×24 icon (optional) */
+		icon?: string;
+		/** Color variant */
+		variant?: 'default' | 'primary' | 'info' | 'purple';
+		/** Items in the dropdown */
+		items: DropdownItem[];
+	}
+
+	interface Props {
+		/** Number of selected items — bar is hidden when 0 */
+		count: number;
+		/** Primary action buttons */
+		actions?: ActionButton[];
+		/** Dropdown menus (open upward from the bar) */
+		dropdowns?: ActionDropdown[];
+		/** Disables all buttons while true and shows a spinner */
+		loading?: boolean;
+		/** Called when the "Clear" button is clicked */
+		onClear?: () => void;
+		/** Label for the selection count (default: "selected") */
+		countLabel?: string;
+	}
+
+	let {
+		count,
+		actions = [],
+		dropdowns = [],
+		loading = false,
+		onClear,
+		countLabel = 'selected',
+	}: Props = $props();
+
+	let openDropdownId = $state<string | null>(null);
+
+	// Close dropdown on outside click
+	$effect(() => {
+		if (!openDropdownId) return;
+		function handleClick(e: MouseEvent) {
+			if (!(e.target as HTMLElement).closest('.fab-dropdown-wrapper')) {
+				openDropdownId = null;
+			}
+		}
+		const timer = setTimeout(() => document.addEventListener('click', handleClick), 0);
+		return () => {
+			clearTimeout(timer);
+			document.removeEventListener('click', handleClick);
+		};
+	});
+
+	function variantClass(variant: ActionButton['variant'] | ActionDropdown['variant']): string {
+		switch (variant) {
+			case 'primary': return 'fab-btn-primary';
+			case 'danger':  return 'fab-btn-danger';
+			case 'warning': return 'fab-btn-warning';
+			case 'success': return 'fab-btn-success';
+			case 'info':    return 'fab-btn-info';
+			case 'purple':  return 'fab-btn-purple';
+			default:        return 'fab-btn-default';
+		}
+	}
+</script>
+
+{#if count > 0}
+	<div class="fab" transition:fade={{ duration: 150 }}>
+		<span class="fab-count">{count} {countLabel}</span>
+
+		{#if actions.length > 0}
+			<div class="fab-divider"></div>
+			{#each actions as action}
+				<button
+					type="button"
+					class="fab-btn {variantClass(action.variant)}"
+					onclick={action.onclick}
+					disabled={loading}
+				>
+					{#if action.icon}
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+							<!-- svelte-ignore a11y_consider_explicit_label -->
+							{@html action.icon}
+						</svg>
+					{/if}
+					{action.label}
+				</button>
+			{/each}
+		{/if}
+
+		{#if dropdowns.length > 0}
+			<div class="fab-divider"></div>
+			{#each dropdowns as dropdown}
+				<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+				<div
+					class="fab-dropdown-wrapper"
+					role="group"
+					onclick={(e) => e.stopPropagation()}
+					onkeydown={(e) => e.stopPropagation()}
+				>
+					<button
+						type="button"
+						class="fab-btn {variantClass(dropdown.variant)}"
+						onclick={() => openDropdownId = openDropdownId === dropdown.id ? null : dropdown.id}
+						disabled={loading}
+					>
+						{#if dropdown.icon}
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+								<!-- svelte-ignore a11y_consider_explicit_label -->
+								{@html dropdown.icon}
+							</svg>
+						{/if}
+						{dropdown.label}
+					</button>
+					{#if openDropdownId === dropdown.id}
+						<div class="fab-dropdown" transition:fade={{ duration: 100 }}>
+							{#each dropdown.items as item}
+								<button
+									class="fab-dropdown-item"
+									onclick={() => { item.onclick(); openDropdownId = null; }}
+								>
+									{#if item.dotColor}
+										<span class="fab-dot" style="background: {item.dotColor};"></span>
+									{/if}
+									{#if item.iconSnippet}
+										{@render item.iconSnippet()}
+									{/if}
+									{item.label}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+
+		{#if onClear}
+			<div class="fab-divider"></div>
+			<button type="button" class="fab-btn fab-btn-clear" onclick={onClear} disabled={loading}>
+				Clear
+			</button>
+		{/if}
+
+		{#if loading}
+			<div class="fab-spinner"></div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.fab {
+		position: fixed;
+		bottom: 1.5rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 50;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		background: oklch(0.16 0.02 250);
+		border: 1px solid oklch(0.30 0.02 250);
+		border-radius: 0.75rem;
+		box-shadow: 0 8px 32px oklch(0.05 0 0 / 0.6), 0 2px 8px oklch(0.05 0 0 / 0.3);
+	}
+
+	.fab-count {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: oklch(0.85 0.02 250);
+		white-space: nowrap;
+	}
+
+	.fab-divider {
+		width: 1px;
+		height: 1.25rem;
+		background: oklch(0.30 0.02 250);
+	}
+
+	.fab-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.625rem;
+		border: 1px solid transparent;
+		border-radius: 0.375rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.15s;
+		white-space: nowrap;
+	}
+	.fab-btn:disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	/* Variants */
+	.fab-btn-default {
+		background: oklch(0.25 0.02 250 / 0.5);
+		color: oklch(0.75 0.02 250);
+		border-color: oklch(0.35 0.02 250);
+	}
+	.fab-btn-default:hover { background: oklch(0.30 0.02 250); }
+
+	.fab-btn-primary {
+		background: oklch(0.65 0.18 250 / 0.15);
+		color: oklch(0.82 0.14 250);
+		border-color: oklch(0.65 0.18 250 / 0.3);
+	}
+	.fab-btn-primary:hover { background: oklch(0.65 0.18 250 / 0.25); }
+
+	.fab-btn-danger {
+		background: oklch(0.55 0.18 30 / 0.15);
+		color: oklch(0.80 0.15 30);
+		border-color: oklch(0.55 0.18 30 / 0.3);
+	}
+	.fab-btn-danger:hover { background: oklch(0.55 0.18 30 / 0.25); }
+
+	.fab-btn-warning {
+		background: oklch(0.75 0.15 85 / 0.12);
+		color: oklch(0.80 0.12 85);
+		border-color: oklch(0.75 0.15 85 / 0.25);
+	}
+	.fab-btn-warning:hover { background: oklch(0.75 0.15 85 / 0.22); }
+
+	.fab-btn-success {
+		background: oklch(0.55 0.15 145 / 0.15);
+		color: oklch(0.80 0.12 145);
+		border-color: oklch(0.55 0.15 145 / 0.3);
+	}
+	.fab-btn-success:hover { background: oklch(0.55 0.15 145 / 0.25); }
+
+	.fab-btn-info {
+		background: oklch(0.55 0.15 200 / 0.15);
+		color: oklch(0.80 0.12 200);
+		border-color: oklch(0.55 0.15 200 / 0.3);
+	}
+	.fab-btn-info:hover { background: oklch(0.55 0.15 200 / 0.25); }
+
+	.fab-btn-purple {
+		background: oklch(0.55 0.15 300 / 0.15);
+		color: oklch(0.80 0.12 300);
+		border-color: oklch(0.55 0.15 300 / 0.3);
+	}
+	.fab-btn-purple:hover { background: oklch(0.55 0.15 300 / 0.25); }
+
+	.fab-btn-clear {
+		background: transparent;
+		color: oklch(0.65 0.02 250);
+		border-color: transparent;
+	}
+	.fab-btn-clear:hover {
+		background: oklch(0.25 0.02 250);
+		color: oklch(0.80 0.02 250);
+	}
+
+	.fab-spinner {
+		width: 14px;
+		height: 14px;
+		border: 2px solid oklch(0.35 0.02 250);
+		border-top-color: oklch(0.70 0.15 240);
+		border-radius: 50%;
+		animation: fab-spin 0.6s linear infinite;
+		flex-shrink: 0;
+	}
+	@keyframes fab-spin {
+		to { transform: rotate(360deg); }
+	}
+
+	/* Dropdown */
+	.fab-dropdown-wrapper {
+		position: relative;
+	}
+	.fab-dropdown {
+		position: absolute;
+		bottom: calc(100% + 8px);
+		left: 50%;
+		transform: translateX(-50%);
+		min-width: 160px;
+		background: oklch(0.18 0.02 250);
+		border: 1px solid oklch(0.30 0.02 250);
+		border-radius: 0.5rem;
+		padding: 0.375rem;
+		box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.5);
+		z-index: 60;
+	}
+	.fab-dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.375rem 0.625rem;
+		border: none;
+		background: transparent;
+		color: oklch(0.80 0.02 250);
+		font-size: 0.75rem;
+		text-align: left;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: background 0.1s;
+		white-space: nowrap;
+	}
+	.fab-dropdown-item:hover { background: oklch(0.25 0.02 250); }
+
+	.fab-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+</style>

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

@@ -0,0 +1,51 @@
+export interface ActionButton {
+    /** Unique key */
+    id: string;
+    /** Button label */
+    label: string;
+    /** SVG path string for a 24×24 icon (optional) */
+    icon?: string;
+    /** Color variant */
+    variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+    /** Called when clicked */
+    onclick: () => void;
+}
+export interface DropdownItem {
+    /** Display label */
+    label: string;
+    /** Optional colored dot (oklch string) */
+    dotColor?: string;
+    /** Optional SVG snippet rendered before the label */
+    iconSnippet?: import('svelte').Snippet;
+    /** Called when this item is clicked */
+    onclick: () => void;
+}
+export interface ActionDropdown {
+    /** Unique key */
+    id: string;
+    /** Button label */
+    label: string;
+    /** SVG path string for a 24×24 icon (optional) */
+    icon?: string;
+    /** Color variant */
+    variant?: 'default' | 'primary' | 'info' | 'purple';
+    /** Items in the dropdown */
+    items: DropdownItem[];
+}
+interface Props {
+    /** Number of selected items — bar is hidden when 0 */
+    count: number;
+    /** Primary action buttons */
+    actions?: ActionButton[];
+    /** Dropdown menus (open upward from the bar) */
+    dropdowns?: ActionDropdown[];
+    /** Disables all buttons while true and shows a spinner */
+    loading?: boolean;
+    /** Called when the "Clear" button is clicked */
+    onClear?: () => void;
+    /** Label for the selection count (default: "selected") */
+    countLabel?: string;
+}
+declare const FloatingActionBar: import("svelte").Component<Props, {}, "">;
+type FloatingActionBar = ReturnType<typeof FloatingActionBar>;
+export default FloatingActionBar;