@joewinke/jatui 0.1.23 → 0.1.24

package/src/lib/components/SelectInput.svelte

@@ -1,237 +0,0 @@
-<script lang="ts">
-	/**
-	 * SelectInput Component
-	 *
-	 * Dropdown select with searchable mode, grouped options, and validation.
-	 * Converted from Svelte 4 to Svelte 5 runes.
-	 */
-
-	import { onMount } from 'svelte';
-
-	export interface SelectOption {
-		value: string | number;
-		label: string;
-		disabled?: boolean;
-		group?: string;
-	}
-
-	interface Props {
-		label: string;
-		value?: string | number;
-		options?: SelectOption[];
-		placeholder?: string;
-		required?: boolean;
-		disabled?: boolean;
-		searchable?: boolean;
-		error?: string;
-		helpText?: string;
-		size?: 'sm' | 'md' | 'lg';
-		class?: string;
-		id?: string;
-		name?: string;
-		clearSearchOnSelect?: boolean;
-		onchange?: (value: string | number, option: SelectOption | undefined) => void;
-	}
-
-	let {
-		label,
-		value = $bindable(''),
-		options = [],
-		placeholder = 'Select an option',
-		required = false,
-		disabled = false,
-		searchable = false,
-		error = '',
-		helpText = '',
-		size = 'md',
-		class: className = '',
-		id = `select-input-${Math.random().toString(36).substr(2, 9)}`,
-		name = '',
-		clearSearchOnSelect = true,
-		onchange
-	}: Props = $props();
-
-	let searchTerm = $state('');
-	let isOpen = $state(false);
-	let selectElement: HTMLElement | undefined = $state();
-
-	const sizeClass = $derived({ sm: 'select-sm', md: '', lg: 'select-lg' }[size]);
-
-	const selectClass = $derived(
-		['select select-bordered w-full', sizeClass, error ? 'select-error' : '', disabled ? 'select-disabled' : '', className]
-			.filter(Boolean)
-			.join(' ')
-	);
-
-	const filteredOptions = $derived(
-		searchable && searchTerm
-			? options.filter((o) => o.label.toLowerCase().includes(searchTerm.toLowerCase()))
-			: options
-	);
-
-	const selectedOption = $derived(options.find((o) => o.value === value));
-
-	const groupedOptions = $derived(
-		filteredOptions.reduce(
-			(acc, option) => {
-				const group = option.group || 'default';
-				if (!acc[group]) acc[group] = [];
-				acc[group].push(option);
-				return acc;
-			},
-			{} as Record<string, SelectOption[]>
-		)
-	);
-
-	function handleSelect(option: SelectOption) {
-		if (option.disabled) return;
-		value = option.value;
-		onchange?.(value, option);
-		if (clearSearchOnSelect) searchTerm = '';
-		isOpen = false;
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			isOpen = false;
-			searchTerm = '';
-		}
-	}
-
-	function handleClickOutside(event: Event) {
-		if (selectElement && !selectElement.contains(event.target as Node)) {
-			isOpen = false;
-			searchTerm = '';
-		}
-	}
-
-	function handleNativeChange(e: Event) {
-		const target = e.currentTarget as HTMLSelectElement;
-		const option = options.find((opt) => opt.value.toString() === target.value);
-		onchange?.(value!, option);
-	}
-
-	onMount(() => {
-		document.addEventListener('click', handleClickOutside);
-		return () => document.removeEventListener('click', handleClickOutside);
-	});
-
-	// Error-state shake (transitions.dev). Shakes the whole control wrapper when
-	// `error` becomes set. See TextInput for the rationale.
-	let hadError = false;
-	$effect(() => {
-		const hasError = !!error;
-		if (hasError && !hadError && selectElement) {
-			const reduce =
-				typeof window !== 'undefined' &&
-				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-			if (!reduce) {
-				selectElement.classList.remove('t-input-shake');
-				void selectElement.offsetWidth;
-				selectElement.classList.add('t-input-shake');
-			}
-		}
-		hadError = hasError;
-	});
-</script>
-
-<div
-	class="form-control w-full"
-	bind:this={selectElement}
-	onanimationend={() => selectElement?.classList.remove('t-input-shake')}
->
-	<label for={id} class="label">
-		<span class="text-[0.8125rem] font-medium text-base-content/85">
-			{label}
-			{#if required}
-				<span class="text-error ml-1">*</span>
-			{/if}
-		</span>
-	</label>
-
-	{#if searchable}
-		<div class="dropdown w-full {isOpen ? 'dropdown-open' : ''}">
-			<div tabindex="0" role="button" class="btn btn-outline w-full justify-between {sizeClass}">
-				<input
-					{id}
-					{name}
-					type="text"
-					placeholder={selectedOption?.label || placeholder}
-					bind:value={searchTerm}
-					onfocus={() => (isOpen = true)}
-					onkeydown={handleKeydown}
-					class="input input-ghost w-full p-0 h-auto min-h-0 focus:outline-none"
-					{disabled}
-					{required}
-					aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
-					aria-invalid={error ? 'true' : 'false'}
-				/>
-				<svg class="w-4 h-4 opacity-70" 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"></path>
-				</svg>
-			</div>
-
-			{#if isOpen}
-				<div class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-auto">
-					{#each Object.entries(groupedOptions) as [groupName, groupOpts]}
-						{#if groupName !== 'default'}
-							<div class="menu-title"><span>{groupName}</span></div>
-						{/if}
-						{#each groupOpts as option}
-							<li>
-								<button
-									type="button"
-									class="text-left {option.disabled ? 'disabled' : ''}"
-									class:active={option.value === value}
-									onclick={() => handleSelect(option)}
-									disabled={option.disabled}
-								>
-									{option.label}
-								</button>
-							</li>
-						{/each}
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{:else}
-		<select
-			{id}
-			{name}
-			{required}
-			{disabled}
-			bind:value
-			class={selectClass}
-			aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
-			aria-invalid={error ? 'true' : 'false'}
-			onchange={handleNativeChange}
-		>
-			{#if placeholder}
-				<option value="" disabled>{placeholder}</option>
-			{/if}
-			{#each Object.entries(groupedOptions) as [groupName, groupOpts]}
-				{#if groupName !== 'default'}
-					<optgroup label={groupName}>
-						{#each groupOpts as option}
-							<option value={option.value} disabled={option.disabled}>{option.label}</option>
-						{/each}
-					</optgroup>
-				{:else}
-					{#each groupOpts as option}
-						<option value={option.value} disabled={option.disabled}>{option.label}</option>
-					{/each}
-				{/if}
-			{/each}
-		</select>
-	{/if}
-
-	{#if error}
-		<div class="label">
-			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
-		</div>
-	{:else if helpText}
-		<div class="label">
-			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
-		</div>
-	{/if}
-</div>

package/src/lib/components/SidebarUserFooter.svelte

@@ -1,34 +0,0 @@
-<!--
-  SidebarUserFooter — avatar + name (links to account) + sign out button.
-  Placed at the bottom of app sidebar drawers (admin, facilitator, portal).
-  Used in JST template layouts.
--->
-<script lang="ts">
-  import UserAvatar from './UserAvatar.svelte'
-
-  interface Props {
-    profile?: { full_name?: string | null; avatar_url?: string | null } | null
-    user?: { email?: string | null } | null
-    /** Where the avatar/name links to. Defaults to /account */
-    accountHref?: string
-    /** Sign out URL. Defaults to /account/sign_out */
-    signOutHref?: string
-  }
-
-  let {
-    profile,
-    user,
-    accountHref = '/account',
-    signOutHref = '/account/sign_out',
-  }: Props = $props()
-
-  let displayName = $derived(profile?.full_name || user?.email || '?')
-</script>
-
-<div class="flex items-center gap-2 px-2 py-1">
-  <a href={accountHref} class="flex items-center gap-2 flex-1 min-w-0" title="Account settings">
-    <UserAvatar name={profile?.full_name} email={user?.email} avatarUrl={profile?.avatar_url} size="sm" />
-    <span class="truncate text-[0.9375rem]">{displayName}</span>
-  </a>
-  <a href={signOutHref} class="btn btn-ghost btn-xs shrink-0">Sign out</a>
-</div>

package/src/lib/components/SignaturePad.svelte

@@ -1,175 +0,0 @@
-<script lang="ts">
-	/**
-	 * SignaturePad — Canvas-based digital signature capture with mouse and touch support.
-	 *
-	 * Exports `clear()` and `isEmpty()` methods. Outputs signature as base64 PNG data URL
-	 * via the bindable `signatureData` prop or `onSignatureChange` callback.
-	 */
-	import { onMount } from 'svelte';
-
-	let {
-		signatureData = $bindable(''),
-		onSignatureChange,
-		width = 400,
-		height = 150,
-		strokeColor = '',
-		strokeWidth = 2,
-		label = 'Signature',
-		required = false,
-		placeholder = 'Sign here',
-	}: {
-		signatureData?: string;
-		onSignatureChange?: (data: string) => void;
-		width?: number;
-		height?: number;
-		strokeColor?: string;
-		strokeWidth?: number;
-		label?: string;
-		required?: boolean;
-		placeholder?: string;
-	} = $props();
-
-	let canvas: HTMLCanvasElement;
-	let isDrawing = false;
-	let lastX = 0;
-	let lastY = 0;
-	let hasDrawn = $state(false);
-
-	onMount(() => {
-		if (!canvas) return;
-
-		const ctx = canvas.getContext('2d');
-		if (!ctx) return;
-
-		const resolvedStroke = strokeColor ||
-			getComputedStyle(canvas).getPropertyValue('--color-base-content').trim() ||
-			'oklch(0.21 0 0)';
-		ctx.strokeStyle = resolvedStroke;
-		ctx.lineWidth = strokeWidth;
-		ctx.lineCap = 'round';
-		ctx.lineJoin = 'round';
-
-		function getCoordinates(e: MouseEvent | TouchEvent) {
-			const rect = canvas.getBoundingClientRect();
-			const scaleX = canvas.width / rect.width;
-			const scaleY = canvas.height / rect.height;
-
-			if (e instanceof MouseEvent) {
-				return {
-					x: (e.clientX - rect.left) * scaleX,
-					y: (e.clientY - rect.top) * scaleY
-				};
-			} else {
-				return {
-					x: (e.touches[0].clientX - rect.left) * scaleX,
-					y: (e.touches[0].clientY - rect.top) * scaleY
-				};
-			}
-		}
-
-		function startDrawing(e: MouseEvent | TouchEvent) {
-			e.preventDefault();
-			isDrawing = true;
-			const coords = getCoordinates(e);
-			lastX = coords.x;
-			lastY = coords.y;
-		}
-
-		function draw(e: MouseEvent | TouchEvent) {
-			if (!isDrawing || !ctx) return;
-			e.preventDefault();
-
-			const coords = getCoordinates(e);
-			ctx.beginPath();
-			ctx.moveTo(lastX, lastY);
-			ctx.lineTo(coords.x, coords.y);
-			ctx.stroke();
-			lastX = coords.x;
-			lastY = coords.y;
-			hasDrawn = true;
-		}
-
-		function stopDrawing() {
-			if (isDrawing && hasDrawn) {
-				isDrawing = false;
-				signatureData = canvas.toDataURL();
-				onSignatureChange?.(signatureData);
-			}
-			isDrawing = false;
-		}
-
-		canvas.addEventListener('mousedown', startDrawing);
-		canvas.addEventListener('mousemove', draw);
-		canvas.addEventListener('mouseup', stopDrawing);
-		canvas.addEventListener('mouseleave', stopDrawing);
-
-		canvas.addEventListener('touchstart', startDrawing, { passive: false });
-		canvas.addEventListener('touchmove', draw, { passive: false });
-		canvas.addEventListener('touchend', stopDrawing);
-		canvas.addEventListener('touchcancel', stopDrawing);
-
-		return () => {
-			canvas.removeEventListener('mousedown', startDrawing);
-			canvas.removeEventListener('mousemove', draw);
-			canvas.removeEventListener('mouseup', stopDrawing);
-			canvas.removeEventListener('mouseleave', stopDrawing);
-			canvas.removeEventListener('touchstart', startDrawing);
-			canvas.removeEventListener('touchmove', draw);
-			canvas.removeEventListener('touchend', stopDrawing);
-			canvas.removeEventListener('touchcancel', stopDrawing);
-		};
-	});
-
-	export function clear() {
-		if (!canvas) return;
-		const ctx = canvas.getContext('2d');
-		if (!ctx) return;
-
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		signatureData = '';
-		hasDrawn = false;
-		onSignatureChange?.('');
-	}
-
-	export function isEmpty(): boolean {
-		return !hasDrawn || !signatureData;
-	}
-</script>
-
-<div class="signature-pad-container">
-	{#if label}
-		<div class="flex justify-between items-center mb-2">
-			<span class="text-sm text-base-content/70">
-				{label}
-				{#if required}
-					<span class="text-error">*</span>
-				{/if}
-			</span>
-			<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
-				Clear
-			</button>
-		</div>
-	{/if}
-
-	<div class="rounded-lg bg-base-100 overflow-hidden relative transition-all duration-300
-		{hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
-		<canvas
-			bind:this={canvas}
-			{width}
-			{height}
-			class="w-full touch-none cursor-crosshair"
-		></canvas>
-
-		{#if !hasDrawn}
-			<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-				<span class="text-base-content/30 text-sm">{placeholder}</span>
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	canvas {
-		display: block;
-	}
-</style>