@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/FilterDropdown.svelte

@@ -1,203 +0,0 @@
-<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/src/lib/components/FloatingActionBar.svelte

@@ -1,354 +0,0 @@
-<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>