ui-svelte 0.2.11 → 0.2.12

package/dist/form/ImageCropper.svelte

@@ -1,36 +1,80 @@
 <script lang="ts">
-	import { Icon } from '../index.js';
+	import type { IconData } from '../display/Icon.svelte';
+	import {
+		ImageAddRegularIcon,
+		ArrowResetRegularIcon,
+		CropRegularIcon,
+		Dismiss24RegularIcon
+	} from '../icons/index.js';
+	import { Icon, IconButton, Modal, Button } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 
 	type Props = {
-		src: string;
+		src?: string;
 		alt?: string;
 		aspectRatio?: number;
 		minWidth?: number;
 		minHeight?: number;
 		maxWidth?: number;
 		maxHeight?: number;
+		accept?: string;
+		placeholder?: string;
+		icon?: IconData;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		shape?: 'circle' | 'square';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+		disabled?: boolean;
 		onCrop?: (croppedImage: string) => void;
+		onChange?: (file: File | null) => void;
 		class?: string;
+		name?: string;
+		label?: string;
+		helpText?: string;
+		errorText?: string;
 	};
 
 	const {
-		src,
-		alt = 'Image to crop',
+		src: initialSrc,
+		alt = 'Avatar',
 		aspectRatio,
 		minWidth = 50,
 		minHeight = 50,
 		maxWidth,
 		maxHeight,
+		accept = 'image/*',
+		placeholder = 'Upload',
+		icon = ImageAddRegularIcon,
+		size = 'md',
+		shape = 'circle',
+		color = 'muted',
+		variant = 'soft',
+		disabled = false,
 		onCrop,
-		class: className
+		onChange,
+		class: className,
+		name,
+		label,
+		helpText,
+		errorText
 	}: Props = $props();
 
-	let canvas: HTMLCanvasElement;
-	let image: HTMLImageElement;
-	let containerDiv: HTMLDivElement;
+	const uid = $props.id();
 
-	let isDragging = $state(false);
+	let canvas = $state<HTMLCanvasElement>();
+	let image = $state<HTMLImageElement>();
+	let containerDiv = $state<HTMLDivElement>();
+	let fileInput = $state<HTMLInputElement>();
+
+	// svelte-ignore state_referenced_locally
+	let currentSrc = $state(initialSrc || '');
+	// svelte-ignore state_referenced_locally
+	let croppedSrc = $state(initialSrc || '');
+	let uploadedFile = $state<File | null>(null);
+
+	let showModal = $state(false);
+
+	let isCropDragging = $state(false);
 	let isResizing = $state(false);
 	let resizeHandle = $state<string>('');
 
@@ -51,6 +95,57 @@
 	let imageHeight = $state(0);
 	let scale = $state(1);
 
+	const sizeClasses = {
+		xs: 'is-xs',
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg',
+		xl: 'is-xl'
+	};
+
+	const colorClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variantClasses = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+
+	$effect(() => {
+		if (initialSrc && initialSrc !== currentSrc) {
+			currentSrc = initialSrc;
+			croppedSrc = initialSrc;
+			imageLoaded = false;
+		}
+	});
+
+	function handleFiles(fileList: FileList | null) {
+		if (!fileList || fileList.length === 0 || disabled) return;
+
+		const file = fileList[0];
+		if (!file.type.startsWith('image/')) return;
+
+		if (uploadedFile && currentSrc.startsWith('blob:')) {
+			URL.revokeObjectURL(currentSrc);
+		}
+
+		uploadedFile = file;
+		currentSrc = URL.createObjectURL(file);
+		imageLoaded = false;
+		onChange?.(file);
+
+		showModal = true;
+	}
+
 	function handleImageLoad() {
 		if (!image || !containerDiv) return;
 
@@ -67,7 +162,7 @@
 		imageWidth = naturalWidth * scale;
 		imageHeight = naturalHeight * scale;
 
-		const initialSize = Math.min(imageWidth, imageHeight) * 0.6;
+		const initialSize = Math.min(imageWidth, imageHeight) * 0.8;
 		cropWidth = aspectRatio ? initialSize : initialSize;
 		cropHeight = aspectRatio ? initialSize / aspectRatio : initialSize;
 		cropX = (imageWidth - cropWidth) / 2;
@@ -84,7 +179,7 @@
 			isResizing = true;
 			resizeHandle = handle;
 		} else {
-			isDragging = true;
+			isCropDragging = true;
 		}
 
 		startX = e.clientX;
@@ -102,7 +197,7 @@
 		const deltaX = e.clientX - startX;
 		const deltaY = e.clientY - startY;
 
-		if (isDragging) {
+		if (isCropDragging) {
 			cropX = Math.max(0, Math.min(imageWidth - cropWidth, startCropX + deltaX));
 			cropY = Math.max(0, Math.min(imageHeight - cropHeight, startCropY + deltaY));
 		} else if (isResizing) {
@@ -148,7 +243,7 @@
 	}
 
 	function handleMouseUp() {
-		isDragging = false;
+		isCropDragging = false;
 		isResizing = false;
 		resizeHandle = '';
 		document.removeEventListener('mousemove', handleMouseMove);
@@ -180,75 +275,210 @@
 		);
 
 		const croppedImageUrl = canvas.toDataURL('image/png');
+		croppedSrc = croppedImageUrl;
 		onCrop?.(croppedImageUrl);
+		showModal = false;
 	}
 
 	function handleReset() {
 		if (!imageLoaded) return;
-		const initialSize = Math.min(imageWidth, imageHeight) * 0.6;
+		const initialSize = Math.min(imageWidth, imageHeight) * 0.8;
 		cropWidth = aspectRatio ? initialSize : initialSize;
 		cropHeight = aspectRatio ? initialSize / aspectRatio : initialSize;
 		cropX = (imageWidth - cropWidth) / 2;
 		cropY = (imageHeight - cropHeight) / 2;
 	}
+
+	function handleRemoveImage() {
+		if (uploadedFile && currentSrc.startsWith('blob:')) {
+			URL.revokeObjectURL(currentSrc);
+		}
+		uploadedFile = null;
+		currentSrc = '';
+		croppedSrc = '';
+		imageLoaded = false;
+		onChange?.(null);
+	}
+
+	function openCropModal() {
+		if (currentSrc && !disabled) {
+			showModal = true;
+		}
+	}
+
+	function closeModal() {
+		showModal = false;
+	}
 </script>
 
-<div class={cn('image-cropper', className)}>
-	<div class="image-cropper-container" bind:this={containerDiv}>
-		<img
-			bind:this={image}
-			{src}
-			{alt}
-			class="image-cropper-image"
-			onload={handleImageLoad}
-			style="width: {imageWidth}px; height: {imageHeight}px;"
+<div class={cn('field', className)}>
+	{#if label}
+		<span class="field-label">{label}</span>
+	{/if}
+
+	<div class="image-cropper-wrapper">
+		<input
+			bind:this={fileInput}
+			id={`${uid}-${name}`}
+			type="file"
+			hidden
+			{accept}
+			{disabled}
+			{name}
+			onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
 		/>
 
-		{#if imageLoaded}
-			<div class="image-cropper-overlay">
-				<div class="overlay-top" style="height: {cropY}px;"></div>
-				<div class="overlay-middle" style="top: {cropY}px; height: {cropHeight}px;">
-					<div class="overlay-left" style="width: {cropX}px;"></div>
-					<div
-						class="overlay-right"
-						style="left: {cropX + cropWidth}px; width: {imageWidth - cropX - cropWidth}px;"
-					></div>
+		<button
+			type="button"
+			class={cn(
+				'image-cropper-avatar',
+				sizeClasses[size],
+				colorClasses[color],
+				variantClasses[variant],
+				shape === 'circle' && 'is-circle',
+				disabled && 'is-disabled'
+			)}
+			class:is-error={errorText}
+			onclick={() => (croppedSrc ? openCropModal() : fileInput?.click())}
+			{disabled}
+		>
+			{#if croppedSrc}
+				<img src={croppedSrc} {alt} class="image-cropper-preview" />
+				<div class="image-cropper-overlay-edit">
+					<Icon icon={CropRegularIcon} />
 				</div>
-				<div
-					class="overlay-bottom"
-					style="top: {cropY + cropHeight}px; height: {imageHeight - cropY - cropHeight}px;"
-				></div>
+			{:else}
+				<Icon {icon} class="image-cropper-icon" />
+				<span class="image-cropper-placeholder">{placeholder}</span>
+			{/if}
+		</button>
+
+		{#if croppedSrc}
+			<div class="image-cropper-actions">
+				<IconButton
+					icon={ImageAddRegularIcon}
+					variant="ghost"
+					{color}
+					size="sm"
+					onclick={() => fileInput?.click()}
+				/>
+				{#if uploadedFile}
+					<IconButton
+						icon={Dismiss24RegularIcon}
+						variant="ghost"
+						color="danger"
+						size="sm"
+						onclick={handleRemoveImage}
+					/>
+				{/if}
+			</div>
+		{/if}
+	</div>
 
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
+	{#if errorText || helpText}
+		<div class={cn('field-help', errorText && 'is-danger')}>
+			{errorText || helpText}
+		</div>
+	{/if}
+</div>
+
+<Modal bind:open={showModal} onclose={closeModal} color="surface" rootClass="image-cropper-modal">
+	{#snippet header()}
+		<h2 class="image-cropper-modal-title">Crop Image</h2>
+	{/snippet}
+
+	<div class="image-cropper-modal-body">
+		<div class="image-cropper-container" bind:this={containerDiv}>
+			<img
+				bind:this={image}
+				src={currentSrc}
+				{alt}
+				class="image-cropper-image"
+				onload={handleImageLoad}
+				style="width: {imageWidth}px; height: {imageHeight}px;"
+			/>
+
+			{#if imageLoaded}
 				<div
-					class="crop-area"
-					style="left: {cropX}px; top: {cropY}px; width: {cropWidth}px; height: {cropHeight}px;"
-					onmousedown={(e) => handleMouseDown(e)}
+					class="image-cropper-crop-overlay"
+					style="width: {imageWidth}px; height: {imageHeight}px;"
 				>
-					<div class="crop-grid">
-						<div class="grid-line grid-line-v" style="left: 33.33%;"></div>
-						<div class="grid-line grid-line-v" style="left: 66.66%;"></div>
-						<div class="grid-line grid-line-h" style="top: 33.33%;"></div>
-						<div class="grid-line grid-line-h" style="top: 66.66%;"></div>
+					<div class="overlay-top" style="height: {cropY}px;"></div>
+					<div class="overlay-middle" style="top: {cropY}px; height: {cropHeight}px;">
+						<div class="overlay-left" style="width: {cropX}px;"></div>
+						<div
+							class="overlay-right"
+							style="left: {cropX + cropWidth}px; width: {imageWidth - cropX - cropWidth}px;"
+						></div>
 					</div>
+					<div
+						class="overlay-bottom"
+						style="top: {cropY + cropHeight}px; height: {imageHeight - cropY - cropHeight}px;"
+					></div>
 
-					<div class="resize-handle handle-nw" onmousedown={(e) => handleMouseDown(e, 'nw')}></div>
-					<div class="resize-handle handle-n" onmousedown={(e) => handleMouseDown(e, 'n')}></div>
-					<div class="resize-handle handle-ne" onmousedown={(e) => handleMouseDown(e, 'ne')}></div>
-					<div class="resize-handle handle-e" onmousedown={(e) => handleMouseDown(e, 'e')}></div>
-					<div class="resize-handle handle-se" onmousedown={(e) => handleMouseDown(e, 'se')}></div>
-					<div class="resize-handle handle-s" onmousedown={(e) => handleMouseDown(e, 's')}></div>
-					<div class="resize-handle handle-sw" onmousedown={(e) => handleMouseDown(e, 'sw')}></div>
-					<div class="resize-handle handle-w" onmousedown={(e) => handleMouseDown(e, 'w')}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="crop-area"
+						class:is-circle={shape === 'circle'}
+						style="left: {cropX}px; top: {cropY}px; width: {cropWidth}px; height: {cropHeight}px;"
+						onmousedown={(e) => handleMouseDown(e)}
+					>
+						<div class="crop-grid">
+							<div class="grid-line grid-line-v" style="left: 33.33%;"></div>
+							<div class="grid-line grid-line-v" style="left: 66.66%;"></div>
+							<div class="grid-line grid-line-h" style="top: 33.33%;"></div>
+							<div class="grid-line grid-line-h" style="top: 66.66%;"></div>
+						</div>
+
+						<div
+							class="resize-handle handle-nw"
+							onmousedown={(e) => handleMouseDown(e, 'nw')}
+						></div>
+						<div class="resize-handle handle-n" onmousedown={(e) => handleMouseDown(e, 'n')}></div>
+						<div
+							class="resize-handle handle-ne"
+							onmousedown={(e) => handleMouseDown(e, 'ne')}
+						></div>
+						<div class="resize-handle handle-e" onmousedown={(e) => handleMouseDown(e, 'e')}></div>
+						<div
+							class="resize-handle handle-se"
+							onmousedown={(e) => handleMouseDown(e, 'se')}
+						></div>
+						<div class="resize-handle handle-s" onmousedown={(e) => handleMouseDown(e, 's')}></div>
+						<div
+							class="resize-handle handle-sw"
+							onmousedown={(e) => handleMouseDown(e, 'sw')}
+						></div>
+						<div class="resize-handle handle-w" onmousedown={(e) => handleMouseDown(e, 'w')}></div>
+					</div>
 				</div>
-			</div>
-		{/if}
-	</div>
+			{/if}
+		</div>
 
-	<div class="image-cropper-controls">
-		<button class="btn is-md is-outlined" onclick={handleReset}> refresh icon </button>
-		<button class="btn is-md is-primary is-solid" onclick={handleCrop}> crop icon </button>
+		<canvas bind:this={canvas} class="image-cropper-canvas"></canvas>
 	</div>
 
-	<canvas bind:this={canvas} class="image-cropper-canvas"></canvas>
-</div>
+	{#snippet footer()}
+		<div class="image-cropper-modal-footer">
+			<Button
+				color="muted"
+				variant="ghost"
+				size="sm"
+				onclick={handleReset}
+				startIcon={ArrowResetRegularIcon}
+			>
+				Reset
+			</Button>
+			<Button color="muted" variant="outlined" size="sm" onclick={closeModal}>Cancel</Button>
+			<Button
+				color="primary"
+				variant="solid"
+				size="sm"
+				onclick={handleCrop}
+				startIcon={CropRegularIcon}
+			>
+				Apply
+			</Button>
+		</div>
+	{/snippet}
+</Modal>

package/dist/form/ImageCropper.svelte.d.ts

@@ -1,13 +1,27 @@
+import type { IconData } from '../display/Icon.svelte';
 type Props = {
-    src: string;
+    src?: string;
     alt?: string;
     aspectRatio?: number;
     minWidth?: number;
     minHeight?: number;
     maxWidth?: number;
     maxHeight?: number;
+    accept?: string;
+    placeholder?: string;
+    icon?: IconData;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+    disabled?: boolean;
     onCrop?: (croppedImage: string) => void;
+    onChange?: (file: File | null) => void;
     class?: string;
+    name?: string;
+    label?: string;
+    helpText?: string;
+    errorText?: string;
 };
 declare const ImageCropper: import("svelte").Component<Props, {}, "">;
 type ImageCropper = ReturnType<typeof ImageCropper>;

package/dist/form/{PasswordStrength.svelte → PasswordField.svelte}

@@ -11,7 +11,8 @@
 		controlClass?: string;
 		onchange?: (value: string | number | undefined) => void;
 		oninput?: (value: string | number | undefined) => void;
-		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'line';
 		size?: 'sm' | 'md' | 'lg';
 		name?: string;
 		label?: string;
@@ -24,7 +25,7 @@
 			strong?: string;
 		};
 		isFloatLabel?: boolean;
-		isSolid?: boolean;
+		hideStrength?: boolean;
 	};
 
 	let {
@@ -36,6 +37,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
+		color = 'muted',
 		size = 'md',
 		name,
 		label,
@@ -48,23 +50,45 @@
 			medium: 'Medium',
 			strong: 'Strong'
 		},
-		isSolid
+		hideStrength
 	}: Props = $props();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
 		outlined: 'is-outlined',
 		line: 'is-line'
 	};
 
+	const btnVariants = {
+		solid: 'solid',
+		soft: 'ghost',
+		outlined: 'ghost',
+		line: 'ghost'
+	};
+
 	const sizeClasses = {
 		sm: 'is-sm',
 		md: 'is-md',
 		lg: 'is-lg'
 	};
 
+	const btnSizes = {
+		sm: 'xs',
+		md: 'sm',
+		lg: 'md'
+	};
+
 	const uid = $props.id();
 
 	let isActive = $state(false);
@@ -83,7 +107,8 @@
 		label: string;
 		color: string;
 	} {
-		if (!password) return { score: 0, label: '', color: 'bg-gray-300' };
+		if (hideStrength) return { score: 0, label: '', color: 'bg-muted' };
+		if (!password) return { score: 0, label: '', color: 'bg-muted' };
 
 		let score = 0;
 
@@ -93,17 +118,17 @@
 		if (/[A-Z]/.test(password)) score += 1;
 		if (/\d/.test(password)) score += 1;
 		if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score += 1;
-		if (score <= 2) return { score, label: labels.weak || 'Weak', color: 'bg-red-500' };
+		if (score <= 2) return { score, label: labels.weak || 'Weak', color: 'bg-danger' };
 		if (score <= 4)
 			return {
 				score,
 				label: labels.medium || 'Medium',
-				color: 'bg-yellow-500'
+				color: 'bg-warning'
 			};
 		return {
 			score,
 			label: labels.strong || 'Strong',
-			color: 'bg-green-500'
+			color: 'bg-success'
 		};
 	}
 </script>
@@ -115,9 +140,9 @@
 	<label
 		class={cn(
 			'control',
-			variantClasses[variant],
+			colors[color],
+			variants[variant],
 			sizeClasses[size],
-			isSolid && 'is-solid',
 			isFloatLabel && 'is-float',
 			(isActive || isFocused) && 'is-active',
 			controlClass
@@ -154,25 +179,34 @@
 			onfocusout={() => (isFocused = false)}
 		/>
 		<IconButton
-			variant="ghost"
-			size="sm"
+			size={btnSizes[size] as any}
 			icon={show ? EyeShowRegularIcon : EyeOffRegularIcon}
+			{color}
+			variant={btnVariants[variant] as any}
 			onclick={() => (show = !show)}
 		/>
 	</label>
-	<div class={cn('field-strength')}>
-		<div class="field-strength-bars">
-			{#each Array(4) as _, i}
-				<div
-					class="field-strength-bar-item"
-					class:active={isBarActive(i, strength.score)}
-					class:weak={strength.score <= 2 && isBarActive(i, strength.score)}
-					class:medium={strength.score > 2 && strength.score <= 4 && isBarActive(i, strength.score)}
-					class:strong={strength.score > 4 && isBarActive(i, strength.score)}
-				></div>
-			{/each}
+	{#if !hideStrength}
+		<div class={cn('field-strength')}>
+			<div class="field-strength-bars">
+				{#each Array(4) as _, i}
+					<div
+						class="field-strength-bar-item"
+						class:active={isBarActive(i, strength.score)}
+						class:weak={strength.score <= 2 && isBarActive(i, strength.score)}
+						class:medium={strength.score > 2 &&
+							strength.score <= 4 &&
+							isBarActive(i, strength.score)}
+						class:strong={strength.score > 4 && isBarActive(i, strength.score)}
+					></div>
+				{/each}
+			</div>
+			{#if strength.label}
+				<span class="field-strength-label">{strength.label}</span>
+			{/if}
 		</div>
-	</div>
+	{/if}
+
 	{#if errorText || helpText}
 		<div class={cn('field-help', errorText && 'is-danger')}>
 			{errorText || helpText}

package/dist/form/{PasswordStrength.svelte.d.ts → PasswordField.svelte.d.ts}

@@ -6,7 +6,8 @@ type Props = {
     controlClass?: string;
     onchange?: (value: string | number | undefined) => void;
     oninput?: (value: string | number | undefined) => void;
-    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'line';
     size?: 'sm' | 'md' | 'lg';
     name?: string;
     label?: string;
@@ -19,8 +20,8 @@ type Props = {
         strong?: string;
     };
     isFloatLabel?: boolean;
-    isSolid?: boolean;
+    hideStrength?: boolean;
 };
-declare const PasswordStrength: import("svelte").Component<Props, {}, "value">;
-type PasswordStrength = ReturnType<typeof PasswordStrength>;
-export default PasswordStrength;
+declare const PasswordField: import("svelte").Component<Props, {}, "value">;
+type PasswordField = ReturnType<typeof PasswordField>;
+export default PasswordField;